如何阻止关闭弹窗时页面滚动条重置到顶部？

方案1：修改关闭链接的href值（无需额外JS） #

把关闭按钮的href="#"替换成href="#!"（或者任何页面中不存在的锚点值）。点击时不会触发页面跳转到顶部，同时因为这个锚点不对应任何元素ID，:target伪类失效，弹窗会自动关闭。

修改后的HTML代码：

<a class="close" href="#!">&times;</a>

方案2：用JavaScript阻止默认行为并手动控制弹窗 #

如果需要更灵活的控制逻辑，可以给关闭按钮添加点击事件，阻止默认跳转，同时手动调整弹窗的显示状态。

步骤1：保留原关闭按钮HTML #

<a class="close" href="#">&times;</a>

步骤2：添加JS代码 #

将这段代码放在页面底部（或DOM加载完成的回调中）：

// 获取所有弹窗关闭按钮
const closeBtns = document.querySelectorAll('.popup .close');

closeBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 找到对应的弹窗遮罩层
    const overlay = this.closest('.overlay');
    if (overlay) {
      // 隐藏弹窗
      overlay.style.visibility = 'hidden';
      overlay.style.opacity = '0';
      // 可选：清除URL中的锚点，避免刷新后弹窗仍显示
      window.history.replaceState(null, null, window.location.pathname);
    }
  });
});

额外优化：调整弹窗过渡时间 #

原CSS中.popup的过渡时间设为5秒太长，建议改成0.3秒提升流畅度：

.popup {
  padding: 5px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 5px;
  width: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out; /* 修改过渡时间 */
}

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