href="#" 会触发浏览器滚动到页面顶部，造成视觉突变和布局错位，尤其影响固定定位元素；稳妥方案是用 href="#!" 配合 onclick="return false" 或 JS 拦截 preventDefault，兼顾可访问性与兼容性。
点击 <a href="#"> 会导致页面跳到顶部，这不是“抖动”而是强制滚动——视觉上表现为内容突然上移、布局错位，尤其在固定定位导航或单页应用中特别明显。
为什么 href="#" 会触发跳转
浏览器把 # 解析为指向页面顶部的锚点（即 #top），即使 DOM 中没有 id="top" 元素，也会执行 scroll-to-top 行为。这个滚动会打断当前视口位置，造成视觉突变，看起来像“抖一下”。
- 不是 JS 报错，也不是样式重绘，是原生滚动行为
- 在 iOS Safari 和部分 Android 浏览器中，还会伴随惯性滚动残留，加剧抖动感
- 若页面有
position: fixed元素（如顶部导航栏），滚动后其定位基准被重置，可能短暂偏移再回弹
用 href="javascript:void(0)" 的风险
看似能阻止跳转，但存在兼容性和维护隐患：
- IE6/7 下可能触发页面刷新（尤其配合某些 CGI 或表单上下文）
- 部分安全策略（如 CSP）会拦截
javascript:协议，导致链接完全失效 - 语义错误：a 标签本意是导航，强行剥夺其默认行为却未提供替代交互，对屏幕阅读器不友好
- 无法右键“在新标签页打开”，破坏用户预期
真正稳妥的写法：事件拦截 + 语义保留
保留 <a> 的可访问性和语义，只阻止默认滚动行为：
立即学习“前端免费学习笔记（深入）”；
- 给链接加
href="#!"或href="#noop"（避免空#），再用 JS 拦截：document.querySelectorAll('a[href^="#"]').forEach(el => { el.addEventListener('click', e => { if (e.target.getAttribute('href') === '#!' || e.target.getAttribute('href').startsWith('#noop')) { e.preventDefault(); } }); }); - 更推荐直接用
onclick="return false"，简洁且兼容所有环境：<a href="#!" onclick="return false">菜单项</a>
- 如果需要响应式跳转（比如 SPA 路由），应绑定 JS 路由方法，而非依赖 href：
<a href="#" onclick="navigateTo('/home'); return false">首页</a>
容易被忽略的边界情况
即使解决了链接跳转，页面仍可能“抖”，原因常藏在联动逻辑里：
- 点击后 JS 修改了 body 或容器的
height/overflow，触发滚动条显隐 → 宽度突变 → 整体偏移 - 第三方组件（如弹窗、下拉菜单）在
show时调用el.focus()，浏览器自动滚动到聚焦元素，没做preventScroll: true - Vue/React 组件内使用
v-if或useState切换 DOM，未预留占位空间，导致下方内容上推
这类抖动和链接本身无关，但用户感知是一样的——点一下就晃。得靠 DevTools 的 Layers 面板观察滚动条变化，或 Performance 面板抓 Layout 事件密度来定位真因。
