锚点跳转问题根源在html和css配合：必须用合法唯一id（非name/class）、href严格匹配带#、fixed header遮挡时用scroll-margin-top、动态内容需dom就绪后调用scrollintoview。
锚点跳转本身不依赖 JavaScript，但写错 id、用错属性、忽略滚动偏移，就会导致“点了没反应”或“跳过去看不见目标”——问题几乎全出在 HTML 和 CSS 的配合上。
锚点目标必须用 id，不能用 name 或 class
HTML5 中唯一被浏览器识别为锚点目标的是元素的 id 属性值。其他写法看似能跑，实则埋雷：
-
name在@#@#@#@#@#@#@#@#@#@0 - 错误写法：
href="#FAQ-SECTION"（大小写不一致）、href="#faq section"（含空格）、href="faq-section"（漏掉#） - 跨页面锚点也一样：
href="help.html#troubleshooting"，前提是help.html中存在对应id
fixed header 遮挡内容？用 scroll-margin-top，别碰 padding-top
原生锚点滚动以元素边界框顶部为基准，position: fixed 导航栏会直接盖住目标内容。这不是 bug，是行为预期：
- 错误解法：
div#faq { padding-top: 64px; }—— 这会让内容下移，但滚动仍停在原位置，视觉遮挡依旧，还可能破坏布局流 - 正确解法：
h2[id] { scroll-margin-top: 64px; }—— 告诉浏览器：“滚动时，请把该元素顶部对齐到视口顶部往下 64px 处” - 值必须等于 fixed header 的实际高度（含 border/padding），动态变化时需 JS 同步更新该 CSS 变量
- 兼容性：Chrome 69+、Firefox 68+、Safari 15.4+ 支持；旧版 Safari 可降级设置
html { scroll-padding-top: 64px; }
动态渲染内容中锚点失效？等 DOM 就绪再触发 scrollIntoView
AJAX、Vue 或 React 渲染后插入的元素，若点击时 id 还未挂载到 DOM，原生锚点机制就找不到目标：
- 不要依赖
location.hash自动滚动——它只在初始加载或 hashchange 时生效，对异步内容无效 - 在框架生命周期钩子中手动滚动：
document.getElementById("section-2")?.scrollIntoView({ behavior: "smooth", block: "start" }) -
block: "start"确保元素顶部可见；block: "center"可能切掉导航栏，慎用 - 若需监听 hash 变化并高亮菜单，必须确保 hash 更新发生在目标元素已渲染之后，否则首次加载可能错过事件
真正卡住人的从来不是“怎么写”，而是 id 是否合法、是否唯一、是否已存在，以及滚动是否被 fixed 元素截断——这些细节不验证，代码写得再漂亮也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
