锚点跳转失效首要检查id是否合法且唯一：必须以字母开头、仅含字母数字和短横线、大小写敏感、无空格中文，且document.getElementById("about")返回唯一非null节点。
锚点跳转失效的首要检查项：id 是否合法且唯一
点击 href="#about" 没反应，90% 是目标元素压根没挂上 id="about"，或者挂了但值不匹配。浏览器只认 id 属性，name 已废弃；大小写、空格、中文、开头数字（如 id="1-intro"）都会导致部分浏览器静默失败。
- 目标元素必须是真实 DOM 节点，且在点击时已挂载——JS 动态渲染的内容要等
DOMContentLoaded或MutationObserver确认插入后再触发跳转 - 用开发者工具执行
document.getElementById("about")，返回null或多个节点都算失败 - 生成 id 推荐统一规则：
textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')，比如 “联系我” →contact-us
固定导航栏遮挡标题？用 scroll-margin-top 修偏移
锚点跳转后，目标 被 position: fixed 的 header 盖住一半，不是 JS 问题，是浏览器原生行为不补偿固定定位占用的空间。
- 给所有带
id的锚点目标加统一偏移：section[id], h2[id], h3[id] { scroll-margin-top: 72px; }（数值按 header 实际高度微调） - 该属性在 Chrome 61+、Firefox 68+、Safari 15.4+ 原生支持；旧版 Safari 需回退到
el.scrollIntoView()+window.scrollBy(0, -72) - 别用
margin-top或padding-top伪装，会破坏布局流，且响应式下难维护
怎么让跳转变平滑？优先开 scroll-behavior: smooth
原生锚点跳转是瞬移，用户容易迷失位置。最轻量方案就是 CSS 开关，不用 JS 就能生效。
- 加在
上即可：html { scroll-behavior: smooth; }，全局生效 - Safari 14.1 及更早需加前缀：
-webkit-scroll-behavior: smooth; - 如果页面用了 Normalize.css 或某些 UI 框架，先查是否已被重置；冲突时用
!important强制覆盖 - 注意：该属性只控制滚动行为，不解决跳转失败或偏移问题，得和
scroll-margin-top配合用
单页应用（SPA）里锚点不滚动？绕过路由拦截
Vue Router、React Router 默认把 href="#faq" 当作路由路径处理，直接吞掉，不触发原生滚动。
- Vue：用
FAQ - React（React Router v6+）：改用
useNavigate()手动触发element.scrollIntoView()，别依赖 - 通用降级：监听
hashchange，首次加载也手动处理：if (location.hash) document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' })
真正卡住人的从来不是“怎么写锚点”，而是 id 生成逻辑、DOM 存在时机、CSS 定位干扰、路由系统接管这四者之间的隐性耦合。任一环节脱节，表现都是“点了没反应”，但原因可能天差地别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
