Is there a way to ensure that after closing a popup image, the browser returns to the same position where it was before?
Currently, when I close the popup image, the page scrolls back to the top (as indicated by the red square in the example). However, I would like the browser to stay at the same position where the "Click" button is located.
* {overflow:visible;}
div {background:lightgray; height:200px; width:200px; margin: 0 auto 20px;}
div:first-child {background:red;}
.popup {
position: fixed;
top: 0;
padding-top: 80px;
width: 100%;
height: 100%;
display: none;
text-align: center;
background: #747691;
z-index: 510;
opacity: 1;
left: 0;
vertical-align: top;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0, 2s;
animation-name: fadein;
animation-duration: 0.2s;
background-color: rgb(116, 118, 145);
background-color: rgba(116, 118, 145, 0.7);
}<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="#image">Click</a>
<div id="image" class="popup">
<a href="#"><img id="popupImage" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"></a>
</div>