锚点跳转失效主要因 href 与 id 值不完全一致（大小写、符号、空格均敏感），id 不能数字开头或含中文/特殊字符；fixed 导航栏遮挡需用 scroll-margin-top 或 margin-top 补偿；SPA 中路由库拦截 hashchange，须手动 scrollIntoView；iOS Safari 对 scroll-behavior: smooth 支持差，应显式调用 scrollIntoView。
锚点跳转失效：href 值和 id 值必须完全一致
HTML5 锚点跳转失败，最常见的原因是 href 中的值与目标元素的 id 不匹配——大小写、空格、下划线、连字符都算不同。浏览器不会自动纠错或忽略差异。
-
href="#section-1"必须对应，不能是id="Section1"或id="section_1"- id 值不能以数字开头（如
id="1section"是无效 HTML5 属性，部分浏览器会静默忽略）- id 值中避免使用中文、空格、特殊符号（如
id="我的章节"或id="section one"会导致解析失败）滚动到顶部/底部时被 fixed 导航栏遮挡
页面有
position: fixed的头部导航栏时，点击锚点后目标元素会被盖住——因为浏览器默认把元素顶部对齐视口顶部，没考虑 fixed 元素占用的空间。- 最轻量方案：给目标元素加
margin-top或padding-top补偿（例如margin-top: -80px），再用scroll-margin-top（现代浏览器支持）更可靠 -
scroll-margin-top: 80px写在目标元素上，比 JS 调整更稳定，且支持原生平滑滚动 - 若需兼容旧浏览器，可用
window.scrollBy(0, -80)在hashchange后微调，但要注意重复触发风险
SPA 中 hash 变化不触发滚动（React/Vue 路由场景）
单页应用里，路由库（如 React Router、Vue Router）会拦截
hashchange，导致原生锚点行为中断——点击#about后 URL 变了，但页面没滚动。- React Router v6+ 提供
useScrollRestoration和useNavigate配合scrollIntoView手动处理 - 更通用做法：监听
useEffect中的location.hash，用document.getElementById(hash.slice(1))?.scrollIntoView() - 注意：
scrollIntoView默认行为是“顶部对齐”，加{ block: 'start', behavior: 'smooth' }可控制对齐方式和动画
移动端 Safari 对 scroll-behavior: smooth 支持不稳定
即使写了
html { scroll-behavior: smooth }，iOS Safari（尤其 iOS 15 之前）常忽略该声明，或只在首次生效。立即学习“前端免费学习笔记（深入）”；
- 不要依赖全局 CSS 滚动行为，改用 JavaScript 显式调用
element.scrollIntoView({ behavior: 'smooth' }) - 在
DOMContentLoaded或hashchange后立即执行，避免因 DOM 未就绪导致跳转失败 - 若目标元素是动态渲染（如 tab 切换后才出现），需确保它已挂载再调用
scrollIntoView，否则返回null
- id 值不能以数字开头（如
