锚点跳转不平滑是因为未启用scroll-behavior: smooth（须写在html上）；固定头部遮挡需用scroll-margin-top；:target无法直接过渡，需基础样式声明transition；框架中hash更新与DOM渲染时序错位导致失效。
为什么点击锚点后页面会“跳”而不是平滑滚动
浏览器原生行为是把 :target 元素顶部瞬间对齐视口顶部，没有任何过渡——这不是 bug，而是未启用平滑滚动。哪怕写了 transition，也只作用于样式变化，不控制滚动本身。
关键点：scroll-behavior: smooth 必须写在 html 元素上才对 :target 生效；写在 body 或其他容器上，Safari 和部分旧版 Chrome 会直接忽略。
- 检查是否漏了
html { scroll-behavior: smooth; }（不是body） - 确认目标元素有合法
id（小写、连字符、无空格/点号），且与 URL 中的 hash 完全一致（区分大小写） - 若用了 JS 控制滚动（如
scrollIntoView），需确保没覆盖或重置该 CSS 行为
固定头部遮挡 :target 元素怎么办
即使启用了平滑滚动，:target 元素仍会被滚到视口最顶，被 position: fixed 的导航栏盖住。这不是样式问题，是滚动定位逻辑本身没留白。
scroll-margin-top 是唯一纯 CSS 解法：它告诉浏览器“把这个元素当成离顶部 XXpx 的位置来对齐”。值应约等于你的 header 高度（比如 64px）。
立即学习“前端免费学习笔记（深入）”；
- 必须加在目标元素上，例如
section#faq { scroll-margin-top: 64px; } - 不能写在
:target规则里（section:target { scroll-margin-top: 64px; }无效） - Safari 15.4+、Chrome 99+、Firefox 97+ 支持；老版本需用 JS 监听
hashchange后手动调用scrollIntoView({ block: 'start', margin: 64 })
:target 动画失效的常见原因
:target 是匹配/不匹配的瞬时状态，不是可过渡的状态切换。所以只在 :target 里写 transition 没用——浏览器根本不知道从哪开始过渡。
正确做法是：基础样式先声明可动画属性 + 过渡，:target 只负责触发终态。比如淡入效果：
section {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
}
section:target {
opacity: 1;
transform: translateY(0);
}
- 避免用
display: none→:target { display: block }：会触发回流，无法过渡，布局抖动明显 - 别依赖
visibility单独做过渡：它不可动画，必须配合opacity - 动态渲染内容（如 React
useEffect插入）时，若 URL 已带 hash 但 DOM 尚未挂载，:target永远不触发——得靠 JS 补scrollIntoView或延迟匹配
React/Vue 里 :target 不生效的根本原因
框架路由（如 router.push("/page#section2")）通常不真正更新 location.hash，或者更新后 DOM 还没渲染完，导致 :target 失去匹配时机。
最轻量的解法是绕过框架，直接操作原生 hash：
- 点击时用
window.location.hash = "#section2"—— 它会同步触发:target+ 平滑滚动（前提是html { scroll-behavior: smooth }） - 如果必须用
pushState，得补一句location.replace("#section2")避免冗余历史记录，再手动调用document.getElementById("section2")?.scrollIntoView({ behavior: "smooth" }) -
useEffect(() => {}, [location.hash])只能做 JS 层面的高亮或滚动兜底，无法让:target样式生效
真正难调的不是语法，而是 hash 更新和 DOM 渲染之间的时序错位——尤其在首屏加载时 URL 已带 #faq，但对应 <div id="faq"> 是异步加载的。
