点击图片弹窗返回后，如何让浏览器保持原页面位置？

问题描述：点击<kbd>Click</kbd>按钮打开图片弹窗后，关闭弹窗时页面会回到顶部（示例中的红色方块位置），希望关闭后停留在按钮所在位置。

问题原因 #

当前关闭弹窗的链接使用了<a href="#">，点击该链接时，浏览器会默认跳转到页面顶部（因为#指向空锚点，默认定位到页面开头）。

解决方案 #

以下是几种可行的解决方法：

方法1：修改关闭链接并阻止默认跳转

将关闭链接的href设置为无效锚点，同时通过JavaScript阻止默认的锚点跳转行为，直接控制弹窗隐藏：

<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="#close" id="closePopup"><img id="popupImage" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"></a>
</div>

<script>
document.getElementById('closePopup').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('image').style.display = 'none';
});
</script>

方法2：用JavaScript完全控制弹窗显示/隐藏

放弃:target伪类，改用JavaScript监听按钮点击事件来控制弹窗的显示和隐藏，彻底避免锚点触发的页面滚动：

* {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;
    animation-duration: 0.2s;
    background-color: rgba(116, 118, 145, 0.7);
}

.popup.show {
    display: block;
    animation-name: fadein;
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button id="openPopup">Click</button>

<div id="image" class="popup">
    <button id="closePopup"><img id="popupImage" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"></button>
</div>

<script>
const openBtn = document.getElementById('openPopup');
const closeBtn = document.getElementById('closePopup');
const popup = document.getElementById('image');

openBtn.addEventListener('click', () => {
    popup.classList.add('show');
});

closeBtn.addEventListener('click', () => {
    popup.classList.remove('show');
});
</script>

方法3：保留:target同时修正URL锚点

如果想继续使用:target实现弹窗显示，可通过修改URL锚点的方式避免页面滚动：

<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="#image" id="closePopup"><img id="popupImage" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"></a>
</div>

<script>
document.getElementById('closePopup').addEventListener('click', function(e) {
    e.preventDefault();
    window.history.replaceState(null, null, window.location.pathname);
    document.getElementById('image').style.display = 'none';
});
</script>

内容的提问来源于stack exchange，提问作者Danielillo