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>