锚点链接失效主因是id不合法、目标元素不存在或固定头部遮挡；需确保id唯一、合法（字母开头、无空格符号）、严格匹配href值，并用scroll-margin-top解决遮挡问题。
锚点链接能直接跳转到页面某处，但多数人卡在“点了没反应”或“跳过去被顶部遮住”——根本原因不是代码写错，而是 id 值不合法、目标元素不存在，或固定头部没做滚动偏移。
目标元素必须有合法 id 属性
浏览器只认真实存在的、符合规范的 id 值，其他属性（比如 class 或 data-id）完全无效。
-
id必须唯一：同一页面出现两个id="contact"，点击只会跳到第一个 - 不能以数字开头：
id="1-section"在 Safari 旧版和部分安卓 WebView 中会失效；改用id="section-1" - 禁止空格、中文、特殊符号：
id="常见问题？"或id="faq list"都无法匹配；应写作id="faq-list" - 确保元素真实存在且已渲染：JS 动态插入的内容，若
id是后来加的，而用户提前点击了链接，就会静默失败
href="#xxx" 必须严格对应目标 id
链接里的 # 后面内容，要和目标元素的 id 值**完全一致**，包括大小写和连字符。
- 正确：
@#@#@#@#@#@#@#@#@#@0→ 对应<h2 id="installation">...</h2> - 错误：
href="#Installation"（大小写不一致）、href="#installtion"（拼写错误）、href="#section-1"却目标是id="section1" - 跨页跳转写法：
href="guide.html#troubleshooting"，注意路径正确，且目标页确实含有该id
固定头部遮挡内容？用 scroll-margin-top
点击锚点后，目标元素顶部紧贴视口顶部，但若有 position: fixed 的导航栏，内容就会被盖住——这不是 JS 问题，是 CSS 定位逻辑问题。
- 推荐方案：给带
id的目标元素加 CSS：scroll-margin-top: 64px;（数值等于头部高度） - 必须作用于目标元素本身，例如：
h2[id] { scroll-margin-top: 64px; } - 不要用
margin-top或padding-top伪装：它们改变布局，但不修正锚点滚动基准线 - 兼容性：Chrome 99+、Firefox 97+、Safari 15.4+ 原生支持；IE 或极老安卓需回退 JS 方案（
window.scrollTo()+getBoundingClientRect()）
单页应用（SPA）里 hash 跳转不生效？
React/Vue 使用 HashRouter 时，# 已被路由系统接管，直接写 href="#section" 可能触发路由跳转而非锚点滚动。
- Vue Router：用
<router-link :to="{ hash: '#section' }"></router-link>替代原生<a></a> - React Router v6：用
useNavigate()手动设置 hash，或监听useLocation().hash后调用element.scrollIntoView() - 避免混用：不要在同一个页面里既用框架路由又依赖原生锚点，容易冲突
最常被忽略的其实是 id 是否真被浏览器识别——打开开发者工具，Ctrl+F 搜 #your-id，看是否高亮到对应 DOM 元素。没高亮，就说明它根本不在页面里，或者名字打错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
