关闭CSS :target实现的弹窗时页面跳回顶部如何解决

你当前靠CSS :target 伪类匹配URL锚点实现弹窗显隐，关闭按钮为带锚点的<a>标签，点击时浏览器会触发默认的锚点跳转行为：如果关闭按钮的href属性值为#，浏览器会直接滚动到页面顶部，这就是异常跳转的来源。

提供两种可直接落地的解法，第二种长期维护稳定性更高：

• 方案1：保留现有:target逻辑，拦截默认行为+手动控制关闭
  给关闭按钮绑定点击事件，阻止a标签的默认跳转动作，手动控制弹窗隐藏，同时清理地址栏残留的锚点：

  document.querySelector('.popup .close').addEventListener('click', function(e) {
    e.preventDefault() // 核心逻辑：阻止锚点跳转的默认行为
    const overlay = document.getElementById('popup1')
    overlay.style.visibility = 'hidden'
    overlay.style.opacity = '0'
    // 清除地址栏的#popup1锚点，不会新增浏览历史记录
    history.replaceState(null, '', window.location.pathname)
  })
  

  原有通过JS模拟点击隐藏a标签触发弹窗打开的逻辑可以正常保留，不需要额外修改。

• 方案2：弃用锚点触发逻辑，改用类名控制显隐（推荐）
  靠URL锚点控制弹窗本身就容易引入滚动异常、历史记录污染的问题，做嵌入式词典这类场景建议直接换成类名切换方案，从根源规避锚点相关bug：

  1. 修改CSS代码，将原有的:target伪类选择器替换为独立的激活类：

     /* 删除原有的 .overlay:target 规则，替换为下方代码 */
     .overlay.active {
       visibility: visible;
       opacity: 1;
     }
     

  2. 替换原有弹窗触发逻辑，可以删掉专门用来触发点击的隐藏<a id="click_it">标签，需要弹出释义时直接执行：

     document.getElementById('popup1').classList.add('active')
     

  3. 给关闭按钮绑定事件，点击时移除激活类即可关闭弹窗：

     document.querySelector('.popup .close').addEventListener('click', function(e) {
       e.preventDefault()
       document.getElementById('popup1').classList.remove('active')
     })
     

  这套方案完全不操作URL锚点，不会触发任何浏览器默认滚动行为，后续扩展点击遮罩关闭、ESC快捷键关闭之类的功能也更方便。

不推荐用把关闭按钮href改成#xxx不存在锚点、javascript:void(0)这类偷懒方案：前者会产生无效浏览历史，后者会破坏a标签的基础可访问性，对屏幕阅读器等辅助工具不友好。

内容的提问来源于stack exchange，提问作者Isa Özsoy