href="#" 一定会滚到顶部，因浏览器将其解析为跳转至文档起始位置的空 fragment，属 html 原生行为，优先级高于 onclick 和 preventdefault()；推荐改用 href="javascript:void(0)" 避免跳转。
href="#" 为什么一定会滚到顶部
浏览器把 href="#" 解析为“跳转到当前文档空 fragment”，也就是文档起始位置，不查 id="top"，也不管你有没有写这个元素——只要 href 是 #，点击就强制滚动。这不是 JS bug，是 HTML 原生行为，优先级高于 onclick 或 preventDefault()。
最稳妥的替换方案：改 href 值，别依赖 JS 阻止
靠 event.preventDefault() 拦截容易失效，尤其在 iOS Safari 上，滚动可能已触发才执行 JS。直接换掉 href 更可靠：
-
href="javascript:void(0)"：推荐首选，语义清晰、URL 干净、IE9+ 和所有现代浏览器都支持 -
href="javascript:;"：等价于上面，写法更短，但部分老旧工具链会警告“空语句” -
href="#void"或href="#nogo"：前提是 DOM 里真没同名id元素，否则会滚到那个元素上 - 避免
href="###"：URL 地址栏会显示###，略丑，且某些旧版 IE 对多井号处理异常
坚持用 href="#"？preventDefault() 失效的三个关键点
如果你必须保留 href="#"（比如第三方组件限制），以下情况会让 preventDefault() 白写：
- 事件监听写在
onclick属性里，如<a href="#" onclick="doSomething(); return false;"></a>——return false虽能阻止，但耦合严重，难调试 - 用
addEventListener绑定时没传{ passive: false }，尤其移动端，浏览器默认忽略preventDefault() - 事件委托绑在父元素上，但没用
e.target判断是否真是a[href="#"]触发，导致preventDefault()调在了错误节点
scrollIntoView 和 href="#" 容易混淆的边界
页面跳顶不一定是 href="#" 搞的鬼。如果点击后闪一下再回来，或只在某些按钮上发生，先检查 JS 是否误调了 scrollIntoView()：
-
element.scrollIntoView()默认行为在 Chrome 滚到顶部，Safari 可能居中，Firefox 偶尔偏移 - 没传参数时行为不可控，建议显式写成
element.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 若目标元素被
position: fixed或overflow: hidden父容器包裹，scrollIntoView()可能失败，此时回滚顶部其实是 fallback 行为
真正要解决的不是“怎么让页面不动”，而是搞清跳顶源头在哪——是 HTML 的 href，还是 JS 的滚动调用，两者处理方式完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
