锚点跳转失效主因是目标元素缺失id属性；id须唯一、合法（不以数字开头、大小写敏感、无特殊字符），且需配合scroll-margin-top解决fixed遮挡，并用MutationObserver处理动态渲染内容。
目标元素没加 id，跳转就静默失效
点击链接后 URL 变了但页面不动，90% 是因为目标元素压根没写 id 属性。浏览器只认 id，不认 class、data-id，也不认旧式 <a name="xxx"> —— 后者在 HTML5 中已废弃。
-
id必须写在你要滚动到的那个元素上，比如<h3 id="api-reference">API 参考</h3>，不是它外面的<section> - 值不能以数字开头：
id="1-intro"在 Safari 15.4 之前会失效，应改用id="intro-1" - 大小写敏感：
href="#FAQ"不匹配id="faq"；也不能含空格、中文或点号（.）、冒号（:）等 CSS 选择器特殊字符 - 同一页面中
id必须唯一；重复时，所有指向该id的链接都只会跳到第一个元素，后续全部静默失败
fixed 导航栏遮挡目标内容，scroll-margin-top 是正解
原生锚点跳转默认把目标元素顶部对齐视口顶部，而门户页几乎都有 position: fixed 的顶部导航栏（高度常为 64px 或 80px），结果就是“滚到了，但被盖住了”。
- 别用
margin-top: -64px+padding-top: 64px这类 hack，容易引发布局错乱和响应式断层 - 给目标元素本身加 CSS：
h2[id] { scroll-margin-top: 64px; }—— 数值必须等于固定头部实际高度（含 border/padding） - 这个样式必须作用于带
id的元素，或其可滚动的父容器；写在<html>或<body>上无效 - IE 完全不支持
scroll-margin-top；如需兼容，改用 JS：document.getElementById('api-reference').scrollIntoView({ behavior: 'smooth', block: 'start' })
动态渲染内容导致锚点失效，得等 DOM 就绪再触发
门户页常通过 React/Vue 渲染模块、AJAX 加载 FAQ、或 CodeMirror 插入运行示例 —— 这些内容在用户点击链接时可能还没插入 DOM，原生锚点机制根本找不到目标。
-
DOMContentLoaded或window.load不够：它们只保证初始 HTML 解析完成，不保证 JS 动态插入的内容已就位 - 推荐用
MutationObserver监听目标id是否出现：if (location.hash) { const target = document.querySelector(location.hash); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } else { const observer = new MutationObserver(() => { const el = document.querySelector(location.hash); if (el) { observer.disconnect(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); observer.observe(document.body, { childList: true, subtree: true }); } } - 若使用框架，优先在组件挂载钩子中触发：
mounted（Vue）、useEffect（React）
scroll-behavior: smooth 要加在 <html> 上，且不能和 overflow: hidden 冲突
想让所有锚点跳转变平滑，最简方案是加一行 CSS，但它有硬性约束条件。
- 必须写在
<html>元素上：html { scroll-behavior: smooth; }；写在<body>或其他地方无效 - 如果
<html>或<body>上设了overflow: hidden，整个锚点滚动会被直接禁用 —— 这是浏览器规范行为，不是 bug - 它只影响原生
#id跳转，不影响 JS 调用的scrollIntoView()；后者需单独配behavior: 'smooth' - 旧浏览器（如 IE）自动忽略该声明，退回到瞬时滚动，无副作用，无需 JS 降级
真正麻烦的不是怎么写 id，而是怎么确保它在 SSR/CSR 混合输出、多模块拼接、服务端模板循环生成时不被复制或覆盖 —— 这需要构建时校验或运行时去重，而不是靠人工检查。
