基础锚点跳转需<a href="#section-1">配合<h2 id="section-1">，但90%失效源于id合法性、DOM渲染时机或CSS截断：id须严格匹配、不以数字开头、无空格/中文/特殊字符、唯一且已挂载；scroll-behavior: smooth须作用于html元素；固定头部遮挡时用scroll-margin-top补偿。
直接用 <a href="#section-1"> 配合 <h2 id="section-1"> 就能实现基础锚点跳转，但“能跳”不等于“跳得准”——90% 的失效或偏移问题出在 id 合法性、DOM 渲染时机或 CSS 截断上，不是 JS 没写对。
href 和 id 必须严格匹配且合法
浏览器通过 document.getElementById("section-1") 查找目标，错一个字符就静默失败，不报错也不滚动。
-
href必须是#section-1这种格式，不能是section-1、/#section-1或?id=section-1 -
id不能以数字开头（如id="1-section"在旧版 Safari 可能失效），推荐用id="section-1" -
id中不能含空格、中文、点号、括号等（id="联系我们"或id="contact.us"均会中断） - 同一页面内
id必须唯一；重复时只滚动到第一个匹配元素 - 目标元素必须已存在于 DOM 中——Vue/React 动态渲染的内容，若点击时还没挂载，
getElementById返回null，跳转即失效
scroll-behavior: smooth 必须作用于 html 元素
这个属性只对「滚动上下文根」起作用。现代浏览器的主滚动容器是 html 元素，不是 body ——即使你看到 body 在动，它也只是视觉代理。
- ✅ 正确：
html { scroll-behavior: smooth; }，放在全局样式最前面 - ❌ 无效：
body { scroll-behavior: smooth; }、* { scroll-behavior: smooth; }、.wrapper { scroll-behavior: smooth; }（除非它是局部滚动容器） - 检查方式：开发者工具中选中
html元素 → 查看 computed 样式里scroll-behavior是否为smooth，且未被!important覆盖 - 某些 UI 框架（如 Ant Design）会重置为
auto !important，需手动覆盖
固定头部遮挡时用 scroll-margin-top 补偿
默认滚动会把目标元素顶部贴到视口顶部，但 position: fixed 导航栏会盖住内容。别用负 margin 或 padding 挤开目标元素——这破坏布局，且不解决定位逻辑。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给目标元素加
scroll-margin-top，例如：h2[id] { scroll-margin-top: 64px; } - 该值应等于固定头部高度（含
border/padding），支持px、rem、vh等单位 - 注意：
scroll-margin-top必须写在目标元素自身上，不是body或html - 若目标在 Shadow DOM 或 iframe 中，需单独设置
动态内容未加载完成时怎么确保跳转成功
在线运行代码类文档常依赖 JS 渲染（如 CodeMirror 实例、运行结果 <div>），而原生锚点跳转发生在 DOM 解析阶段，早于 JS 执行。结果就是 URL 带 hash，但页面没滚过去。
- 监听
DOMContentLoaded或window.load不够，得等动态内容插入完成 - 推荐用
MutationObserver监听目标id元素是否已存在： - 首次访问带 hash 的 URL 时，需主动执行一次滚动逻辑（不能只靠
hashchange） - 若目标元素是懒加载图片或异步组件，调用
scrollIntoView()前务必加判断：if (el && el.offsetParent !== null)
真正难的从来不是“怎么写”，而是当页面有吸顶导航、JS 异步渲染、响应式高度变化、框架重置样式时，如何让 scroll-margin-top 的数值始终对得上、id 始终能被查到、scroll-behavior 始终没被覆盖——这些细节一漏，用户就感觉“跳歪了”。
