绝大多数情况是目标元素缺少id锚点标识或用了已废弃的name属性；须确保href="#xxx"与目标元素id="xxx"严格匹配、id全局唯一且不以数字开头、目标已渲染且可见，并用scroll-margin-top避让fixed头部。
锚点跳转失效，a 标签的 href 指向了但页面没动？
绝大多数情况是目标元素缺少可滚动定位的锚点标识，或者用了已废弃的 name 属性。HTML5 中 <a name="xxx"></a> 已被弃用，浏览器虽部分兼容，但不保证行为一致，尤其在现代单页应用或严格模式下会直接失效。
正确做法是给任意元素添加 id 属性，a 标签通过 href="#xxx" 指向该 id：
<a href="#section2">跳转到第二节</a> <h2 id="section2">第二节内容</h2>
-
id值必须唯一，且不能以数字开头（如id="1section"在部分浏览器中可能不被识别） - 目标元素需在 DOM 中存在，且不是
display: none或visibility: hidden状态（否则跳转后位置不可见） - 若目标元素在视口外但高度为 0（比如只含
margin或空div），跳转仍会发生，但视觉上“没动”——这是常见误判点
Vue/React 里点击 a 标签跳转后，页面回到顶部而不是锚点？
框架的路由拦截或组件重渲染会中断原生锚点滚动行为。例如 Vue Router 默认启用 scrollBehavior，若未显式配置，会忽略哈希变化；React Router v6 则完全不处理 # 锚点，需手动监听。
解决方式取决于框架：
- Vue 2 + Vue Router：在
router/index.js中设置scrollBehavior(to) { if (to.hash) return { selector: to.hash } } - React Router v6：用
useEffect监听location.hash，调用document.querySelector(hash)?.scrollIntoView() - 纯 JS 方案（通用）：
window.addEventListener('hashchange', () => { setTimeout(() => document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' }), 50) })
注意：不要在 hashchange 中立即执行 scrollIntoView，DOM 可能尚未更新，加 setTimeout 是稳妥做法。
scrollIntoView 和原生锚点跳转有啥区别？
原生锚点跳转由浏览器自动触发，不依赖 JS，支持前进/后退记录、SEO 友好；scrollIntoView 是 JS 主动控制，更灵活但需手动管理状态。
- 原生跳转：URL 会带上
#xxx，刷新后仍有效；scrollIntoView不改 URL，刷新即丢失位置 -
scrollIntoView({ block: 'start' })类似原生行为；设为'center'或'end'就会偏离默认锚点效果 - 若目标元素是
position: fixed或父容器有overflow: hidden，scrollIntoView可能无效，而原生锚点仍会尝试滚动最近的可滚动祖先
为什么加了 id 还跳不准？目标位置偏高或偏低？
这是 CSS 影响滚动锚点偏移的典型表现，常见于固定头部导航栏场景。浏览器滚动时，是把 id 元素的**顶部边缘**对齐视口顶部，但若页面有 position: sticky 或 fixed 的 header，内容就会被遮挡。
- 最简解法：给目标元素加
scroll-margin-top，如h2[id] { scroll-margin-top: 60px; }（值等于 header 高度） - 兼容性注意：IE 不支持
scroll-margin-top，旧项目需用 JS 补偿或负margin+padding组合 - 避免用
margin-top: -60px单独拉高元素，会导致文档流塌陷或相邻元素间距异常
锚点跳转看着简单，实际牵扯 DOM 存在性、CSS 渲染流、框架生命周期和浏览器滚动机制四层逻辑。漏掉任何一层，都会表现为“点了没反应”或“跳到奇怪的位置”。
