点击汉堡菜单外区域关闭时页面跳回顶部的问题求解

问题根因 #

页面自动跳回顶部的核心原因是交互元素触发了浏览器默认跳转行为，大概率是你用了<a>标签作为汉堡菜单的交互触发/关联元素，且href属性设置为#空锚点，点击时浏览器会默认执行锚点跳转逻辑，空锚点对应的就是页面顶部位置。

javascript:void(0)方案说明 #

这个写法是可以解决当前场景的跳转问题的，直接写在HTML的<a>标签href属性里即可，不需要额外配合JS逻辑。之所以有不推荐使用的说法，主要是两点原因：

• 语义不符合：<a>标签原本的语义是跳转链接，用javascript:伪协议承载空逻辑属于对标签语义的滥用，不利于无障碍适配和代码维护
• 部分老旧浏览器或者严格的安全策略下，可能会拦截javascript:伪协议的执行，产生预期外的问题

更推荐的解决方案 #

你可以根据自己的代码结构选任意一种即可：

• 优先替换语义标签：如果这个元素只是用来触发菜单交互，没有跳转需求，直接用<button>标签替代<a>标签，<button>本身没有默认跳转行为，语义也更符合交互按钮的属性，无障碍适配效果更好
• 保留<a>标签的话，在点击事件处理函数中主动阻止默认行为：在你绑定的点击事件回调里第一行加e.preventDefault()即可，代码示例如下：

menuTrigger.addEventListener('click', (e) => {
  e.preventDefault()
  // 原有切换菜单的逻辑
})

• 如果是点击外部区域关闭时才触发跳转，你可以检查一下外部点击的事件委托逻辑，有没有误捕获到页面内其他带空锚点的<a>标签的点击事件，对应调整事件匹配规则即可。

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