0

I have an iframe that is hidden on load. I have 2 divs one to unhide and another to hide the iframe and they work fine. What I'm trying to achieve is once Iframe is unhidden then the user scrolls on the iframe then clicks on hide the iframe hides but the next time the user clicks on unhide the iframe is on the last scrolled position how can I make it so that when user clicks unhide the iframe scrolls to top position before getting viewed. Thanks in advance.

$('.unhide').on('click', function() {
  //something like this
  $('.iframeCon iframe').scrollTop(0);
  
  $('.iframeCon').show()
})

$('.hide').on('click', function() {
  $('.iframeCon').hide()
})
.iframeCon {
  display: none;
  width: 100%;
  height: 90vh;
  margin-top: 7%;
  z-index: 2;
  background-color: gold;
}

iframe {
  width: 100%;
  height: 100%;
}

div:hover {
  cursor: pointer;
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hide">hide</div>
<div class="unhide">unhide</div>

<div class="iframeCon">
  <iframe src="https://wix.com"></iframe>
</div>
seriously
  • 1,202
  • 5
  • 23
  • Maybe you can try to reload the iframe hoping it will scroll to the top – IT goldman Jun 30 '22 at 19:11
  • @ITgoldman I thought about that but modern browsers cache the scroll position of the iframe body and reapply it. The only solution I can come up with is removing the iframe on hide and appending iframe on unhide. – seriously Jun 30 '22 at 19:27
  • you might want to look at https://stackoverflow.com/questions/5908676/cross-domain-iframe-resize, your best bet is to have a script on the page within the iframe report back to the parent window as detailed here https://stackoverflow.com/questions/16431704/how-to-get-the-scroll-position-of-content-thats-inside-of-an-iframe I hope this helps – Patrick Hume Jul 01 '22 at 01:06

0 Answers0