锚点链接失效主因是目标元素缺失id、id不匹配或被CSS/JS干扰；现代浏览器已弃用name属性，必须用全小写无特殊字符的id，且href严格对应；SPA中需绕过路由拦截，首屏hash需手动处理。
锚点链接失效，八成不是写法错，而是目标元素没 id、id 写错、或被 CSS/JS 干扰了定位行为。
锚点必须用 id，不能只靠 name
现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+）已完全忽略 name 属性做锚点。哪怕你写了 ，href="#top" 也不会滚动过去。
- 目标元素必须带
id属性，且值全小写、无空格、不包含中文或特殊符号（如id="api-reference"✅，id="API 参考"❌） -
href值必须严格匹配：href="#api-reference"，开头的#不能漏，也不能多写/或空格 - 用开发者工具执行
document.getElementById("api-reference")，确认返回的是唯一、非null的 DOM 元素；如果有多个同名id，浏览器只取第一个
scroll-margin-top 解决 fixed 导航栏遮挡问题
点击锚点后，标题被顶部 position: fixed 的导航栏盖住，是原生行为 —— 浏览器滚动时以文档顶部为基准，不考虑视觉偏移。
- 首选方案：给所有锚点目标加 CSS：
h2[id] { scroll-margin-top: 60px; }（60px 对应导航栏高度） - 该属性在主流新浏览器中直接生效，无需 JS，且不影响 SSR 渲染逻辑
- 旧版 Safari（window.addEventListener('hashchange', () => { window.scrollBy(0, -60); })，但需加防抖，避免重复触发
- 别用
margin-top或padding-top单独撑开，会导致页面布局异常，尤其在响应式下
单页应用（SPA）里 href="#xxx" 不滚动？绕过路由拦截
Vue Router、React Router v6+ 等默认把所有 #xxx 当作路由路径处理，a 标签点击后不触发原生锚点滚动，甚至报 404。
- Vue 中：加
target="_self"强制走原生跳转，或改用跳转 - React 中（v6+）：必须使用
createHashRouter，并确保没被自定义useNavigate覆盖 - 通用兜底：删掉
href，用onclick触发document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' })，但要注意 SSR 首屏需手动补一次
监听 hashchange 时要手动处理首次加载
hashchange 事件不会在页面初始加载带 hash 的 URL（如 example.com/#faq）时触发，导致首屏不滚动。
- 必须显式检查：
if (location.hash) handleHashChange(); -
handleHashChange函数里先用document.querySelector(location.hash)判空，避免scrollIntoView报错 - 不要依赖
DOMContentLoaded或load事件顺序 —— 目标元素可能由 JS 动态插入，得等它真实挂载后再滚动 - 如果用了平滑滚动，
scroll-behavior: smooth在老 Safari 会静默降级，建议统一用 JS 控制行为，便于兼容性收口
真正卡住人的从来不是怎么写 href="#xxx"，而是目标元素是否在 DOM 中、CSS 是否截断了滚动流、以及 SPA 框架有没有悄悄劫持你的哈希 —— 这些地方一漏，就只剩“点了没反应”这种玄学问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
