原生锚点跳转失效主因是目标元素id缺失或不匹配、fixed导航遮挡、spa框架劫持及hashchange未处理首次加载。需确保id唯一合法、用scroll-margin-top修复偏移、spa中绕过路由拦截，并手动检查location.hash触发滚动。
原生锚点跳转能用，但直接写 <a href="#section2"></a> 很可能点不动——不是语法错，而是被 CSS、JS 或框架悄悄拦截了。
目标元素的 id 必须存在且唯一
浏览器只认 id 属性，name 已废弃；大小写、空格、中文、特殊符号都会导致匹配失败。
- ✅ 正确写法：
<h2 id="faq">常见问题</h2>，链接写<a href="#faq"></a> - ❌ 常见错误：写成
class="faq"、id="FAQ"、id="常见问题"或id="faq-1"但链接写href="#faq" - 用开发者工具执行
document.getElementById("faq")，必须返回一个非null的 DOM 元素；如果返回null或多个同名id，浏览器只取第一个，其余失效
scroll-margin-top 修复 fixed 导航栏遮挡
点击锚点后标题被顶部导航盖住，是原生行为缺陷，不是 bug。浏览器滚动基准是文档顶部，不自动补偿固定定位高度。
- 首选 CSS 方案：
h2[id] { scroll-margin-top: 60px; }（60px 替换为你的导航栏实际高度） - 该属性在 Chrome 61+、Firefox 68+、Safari 15.4+ 原生支持，SSR 友好，无 JS 依赖
- 避免用
margin-top或padding-top单独撑开目标元素——会破坏布局流，尤其在响应式下易出错 - 旧版 Safari 需回退 JS：
window.addEventListener('hashchange', () => { window.scrollBy(0, -60); })，但要加节流防重复触发
单页应用（SPA）里 href="#xxx" 失效怎么办
Vue Router、React Router v6+、Framework7 等默认劫持所有 a 标签点击，把 #xxx 当作路由路径处理，原生锚点滚动被屏蔽。
- Vue：改用
<router-link to="#faq" custom v-slot="{ navigate }"><button>跳转</button></router-link>，或确保路由模式为mode: 'hash'且未全局preventDefault - React（v6+）：必须使用
createHashRouter，且<link to="#faq">不得被自定义useNavigate覆盖 - Framework7：禁用原生锚点，必须手动调用
document.querySelector('#faq')?.scrollIntoView()，并确保作用于.page-content容器（而非body） - 通用兜底：删掉
href，用onclick触发scrollIntoView，但 SSR 首屏需额外判断location.hash并手动滚动一次
hashchange 不触发首次加载，得手动补
hashchange 事件只在 hash 变更时触发，页面首次加载带 #faq 的 URL 时它根本不会运行，导致首屏不滚动。
- 初始化逻辑必须单独写：
if (location.hash) handleHashChange(); - 监听逻辑另起一行：
window.addEventListener('hashchange', handleHashChange); -
handleHashChange内务必先检查目标是否存在：const el = document.querySelector(location.hash); if (el) el.scrollIntoView({ behavior: 'smooth' });，否则null报错 - 注意 IE8/9 中
hashchange不支持冒泡，只能绑定到window，不能用document
真正卡住人的从来不是怎么写 href="#xxx"，而是目标元素是否在 DOM 中、CSS 是否截断了滚动流、以及 SPA 框架有没有悄悄劫持你的哈希 —— 这些地方一漏，就只剩“点了没反应”这种玄学问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
