<p>锚点跳转失效主因是三处硬性不匹配：href 的 # 后字符串须与目标元素 id 完全一致（区分大小写、无空格）；目标元素必须是有 DOM 节点的标签且 id 全局唯一；SPA 中路由默认拦截需手动放行或用原生 hash 触发。</p>
锚点跳转不是“加个 # 就完事”，没写对 id 或用了错误的标签，页面根本不会动——哪怕 URL 变了。
为什么点击链接没反应？检查这三处硬性匹配
锚点跳转失效，90% 是因为目标元素没被浏览器识别为有效锚点。必须同时满足：
-
href值以#开头，且后面紧跟的字符串（如#section2）要和目标元素的id属性值**完全一致**（区分大小写、不允许多余空格） - 目标元素必须是**有实际 DOM 节点的标签**，比如
<h2 id="section2">或<div id="contact">；name属性在现代 HTML 中已废弃，<a name="top"></a>不再可靠 - 该
id在整个页面中**必须唯一**；重复的id会让浏览器随机选一个，行为不可预测
scrollIntoView() 比原生锚点更可控，但别乱加参数
原生锚点跳转无法控制滚动行为（比如平滑、对齐位置），这时候要用 JS 手动触发。关键不是“会不会写”，而是参数选错会导致滚动卡顿或错位：
- 基础用法：
document.getElementById('faq').scrollIntoView({ behavior: 'smooth' }); -
behavior: 'smooth'是平滑滚动，但 Safari 旧版本不支持；若需兼容，可先检测：if ('scrollBehavior' in document.documentElement.style) -
block: 'start'（默认）让元素顶部对齐视口顶部；改成'center'更适合居中展示卡片类内容 - 别在
scrollIntoView()外再调用window.scrollTo()，两者叠加会冲突
单页应用（SPA）里锚点失效？路由拦截是主因
Vue Router、React Router 默认会捕获所有带 # 的 URL 并阻止默认跳转——这不是 bug，是设计如此。想恢复锚点功能，得显式放行：
立即学习“前端免费学习笔记（深入）”；
- Vue Router：在路由守卫
beforeEach中判断to.hash是否存在，存在则用next(false)中断导航，再手动document.querySelector(to.hash)?.scrollIntoView() - React Router v6：不用
useNavigate，改用原生window.location.hash = '#pricing'触发跳转，避开路由系统 - 注意：服务端渲染（SSR）下首次加载时，
to.hash可能为空，需在useEffect或mounted钩子中补查window.location.hash
最常被忽略的其实是 CSS：如果目标元素被 position: absolute 或 transform 移动过，scrollIntoView() 计算的位置可能偏移；这时候要么去掉变形，要么用 getBoundingClientRect() 手动修正滚动距离。
