href="#" 会强制跳转到页面顶部，因其解析为空 fragment 锚点；推荐改用 href="javascript:void(0)" 避免跳转，或确保 preventDefault() 正确绑定并传 { passive: false }。
为什么 href="#" 会让页面跳到顶部
浏览器把 # 解析为“跳转到当前文档 fragment 为空的锚点”，也就是文档起始位置。它不找 id="top"，也不管你有没有写这个元素——只要 href="#"，点击就强制滚动到最上面。
常见错误现象：点击一个带 onclick 的 <a href="#"> 标签后，页面闪一下回到顶部，JS 逻辑却正常执行了；或者 JS 里写了 event.preventDefault() 但没生效，照样跳顶。
- 根本原因不是 JS 写错了，是 HTML 层级行为优先级更高
- 即使绑了
onclick，浏览器仍会先执行默认跳转，再触发事件（除非显式阻止） - 在 Safari/iOS 上尤其明显，
preventDefault()有时晚于滚动发生，导致“闪一下再滚回来”
href="#" 改成什么才真正不跳顶
直接替换 href 值是最简单、兼容性最好的办法，不用改 JS 逻辑，也不依赖事件绑定时机。
-
href="javascript:void(0)"：推荐首选，语义清晰，URL 干净，所有现代浏览器和 IE9+ 都支持 -
href="###"：浏览器不认识这个 fragment，直接忽略跳转行为；但 URL 地址栏会显示###，略丑 -
href="#void"或href="#nogo"：只要 fragment 不存在且没对应id元素，就不会跳；但需确保 DOM 里真没同名id，否则会滚到那个元素 - 删掉
href属性：变成纯文本，失去鼠标手型和键盘可访问性（Tab 键无法聚焦），不推荐
用 preventDefault() 但还是跳了？检查这三点
如果你坚持用 href="#" 并靠 JS 阻止，默认行为，以下情况会让 preventDefault() 失效或来不及：
立即学习“前端免费学习笔记（深入）”；
- 事件监听写在
onclick属性里，比如<a href="#" onclick="doSomething(); return false;">—— 这里的return false确实能阻止，但写法耦合、难维护 - 用
addEventListener绑定时，没传{ passive: false }（尤其在移动端），某些浏览器会忽略preventDefault() - 事件监听器绑在父元素上（事件委托），但没正确拿到触发
<a>的event.target，导致preventDefault()调在了错误节点上
正确写法示例：
document.querySelector('a[href="#"]').addEventListener('click', function(e) {<br> e.preventDefault();<br> // 你的业务逻辑<br>});
scrollIntoView 和自动跳顶容易混淆的点
这不是同一个问题，但经常被一起排查：当你点击复选框或按钮后页面跳顶，有时其实是 scrollIntoView() 被误调用了，而不是 href="#" 搞的鬼。
- 如果代码里有
document.getElementById("xxx").scrollIntoView()，但"xxx"对应的元素不存在，部分浏览器会 fallback 到顶部 -
label标签包裹input时，若for属性缺失或指向重复id，点击label可能触发表单提交或不可预测滚动 -
scrollIntoView({ block: 'start' })默认就是滚到顶部对齐，别误以为是 bug；要居中显示请用block: 'center'
真正要警惕的是：把结构问题（重复 id、label 关联错）、跳转问题（href="#"）、滚动 API 问题混在一起查，容易绕远路。
