原生锚点跳转失效主因是id未正确绑定、目标未渲染或被fixed导航栏遮挡；需确保id唯一且匹配href值，用scroll-margin-top避让头部，SPA中需绕过路由拦截并确保DOM就绪。
原生锚点跳转能用，但多数失效不是写法错，而是 id 没挂对、目标没渲染出来、或被 fixed 导航栏盖住。
锚点链接为什么点了没反应
最常见原因是目标元素没有 id 属性，或者 id 值和 href 里的值不完全一致（区分大小写、不能有空格、不能是中文）。浏览器只认 id，name 属性已废弃，写了也无效。
-
href="#section2"必须对应<div id="section2">，写成 <code>class="section2"或id="Section2"都不行 - 动态插入的内容（比如 JS 渲染、Vue/React 组件挂载后才出现的区块），点击时 DOM 还没生成，锚点会静默失败
- 多个同名
id：浏览器只取第一个，其余被忽略；可用document.querySelectorAll('[id="section2"]')检查是否重复 - 目标元素设了
display: none、visibility: hidden或父容器有overflow: hidden，也会导致滚动中断 - 给所有锚点目标加统一规则：
h2[id], h3[id] { scroll-margin-top: 60px; }（60px 换成你导航栏实际高度） - 该属性在 Chrome 61+、Firefox 68+、Safari 15.4+ 原生支持，无需 JS，SSR 友好
- 旧版 Safari（window.addEventListener('hashchange', () => window.scrollBy(0, -60))，但要加防抖，避免重复触发
- 别用
margin-top或padding-top单独撑开——会破坏布局流，尤其在响应式下容易错位 - Framework7 必须操作
.page-content容器：document.querySelector('.page-content').scrollTop = targetEl.offsetTop，或调用targetEl.scrollIntoView()前确保它在当前页 DOM 内 - Vue 中推荐用
this.$nextTick(() => el.scrollIntoView())，确保组件已挂载 - React Router v6+ 要用
createHashRouter，且<link to="#faq">不能被自定义useNavigate覆盖 - 通用兜底：删掉
href，改用onclick触发document.querySelector(location.hash)?.scrollIntoView()，但首次加载带 hash 的 URL（如example.com/#faq）必须手动补一次 -
scrollIntoView({ behavior: 'smooth', block: 'start' })：滚到顶部对齐，block: 'center'会居中，但可能切掉导航栏 - IE 不支持对象参数，兼容写法：
el.scrollIntoView(true)（等价于{ behavior: 'auto', block: 'start' }） - 用
scrollTo()时注意：若目标元素在滚动容器内（如.page-content），得调用容器的scrollTop，而不是window.scrollTo() - 懒加载图片或异步组件里，加存在性判断：
if (el && el.offsetParent !== null) el.scrollIntoView()
固定导航栏遮挡标题怎么办
原生锚点滚动以页面顶部为基准，不会自动避开 position: fixed 的头部。最轻量的解法是 CSS：scroll-margin-top。
SPA 中 href="#xxx" 不滚动怎么修
Vue Router、React Router、Framework7 等框架默认拦截所有 a 标签跳转，把 #xxx 当作路由路径处理，原生锚点行为被禁用。
立即学习“前端免费学习笔记（深入）”；
scrollIntoView() 和 scrollTo() 怎么选
scrollIntoView() 更语义化，适合“让某个元素可见”；window.scrollTo() 更底层，适合需要精确像素偏移或配合 getBoundingClientRect() 动态计算的场景。
真正难的不是写一行 href="#xxx"，而是确认目标 id 此刻在 DOM 里、没被 CSS 截断、没被框架路由吞掉，以及滚动后用户真的能看到标题——这三处最容易漏检查。
