锚点跳转失效时先查这三件事：目标元素是否存在且唯一（document.getElementById("faq")非null）、id是否规范（全小写、无空格/中文/特殊字符、不以数字开头）、元素是否已挂载到DOM中。
锚点跳转失效时先查这三件事
页面点了链接没反应，不是代码写错了，而是浏览器根本“看不见”目标元素。必须立刻验证：document.getElementById("faq")返回值是否为非null且唯一；id值是否全小写、不含空格/中文/特殊字符、不以数字开头（id="api-v1"✅，id="1-api"❌）；点击瞬间该元素是否已存在于 DOM 中——动态渲染的内容（CodeMirror 实例、React 组件、AJAX 插入块）若还没挂载，原生锚点就静默失败。
fixed 导航栏遮挡标题？别用 JS 算偏移
浏览器默认把 id 元素顶部对齐视口顶部，但 position: fixed 的导航栏会盖住前 60px～80px。这不是 bug，是规范行为。scroll-margin-top 是目前最轻量、最可靠的修复方式，必须作用在目标元素自身上，例如：h2[id] { scroll-margin-top: 72px; }。数值应严格等于导航栏实际高度（含 padding 和 border）。不要写成 body { scroll-margin-top: 72px; }，它无效；也别用 margin-top 或 padding-top 撑开，会破坏文档流和可访问性。
跨页面带 hash 加载时目标还没渲染怎么办
URL 带 #section-2 进入页面，但目标元素由 JS 动态插入（比如运行结果区块、折叠面板展开后的内容），原生锚点会在 DOM 解析阶段就尝试滚动，早于 JS 执行，结果就是地址栏变了，页面不动。MutationObserver 是推荐方案：监听 document.body 的 childList 和 subtree，一旦 document.querySelector(location.hash) 返回有效节点，立即调用 el.scrollIntoView({ behavior: 'smooth', block: 'start' }) 并断开观察器。注意：不能只等 DOMContentLoaded，因为动态内容可能更晚插入。
SPA 路由拦截了 href="#xxx" 怎么办
Vue Router、React Router v6+ 默认把 #faq 当作路由路径处理，而不是原生锚点行为，结果就是地址栏变、页面不动、甚至触发 404。解决方法分两步：一是禁用路由对 hash 的拦截（如 Vue Router 配置 scrollBehavior: () => {} 并手动处理）；二是改用 history.pushState + el.scrollIntoView 主动触发，而非依赖 <a href="#xxx">。关键点：SPA 中的锚点跳转本质是“状态变更 + 滚动”，不是纯 HTML 行为。
立即学习“前端免费学习笔记（深入）”；
真正难的不是让锚点“动起来”，而是让它在各种加载时机、各种布局约束、各种框架拦截下都“停得准”。scroll-margin-top、MutationObserver、绕过路由拦截——这三个点缺一不可，漏掉任意一个，用户就会卡在错误位置。
