如何使用CSS定位实现单页应用中各个板块的平滑滚动定位？

scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上无效；仅对锚点跳转和 scrollIntoView() 生效，需确保 id 与 href 严格匹配、目标可见且在文档流中，并用 scroll-margin-top 避开固定头部。

scroll-behavior 必须写在 html 上，不是 body

写了 body { scroll-behavior: smooth; } 却没效果？这是最常见误配。浏览器页面级滚动容器是 html 元素，body 在多数场景下只是内容容器，不负责视口滚动。CSS 规则必须作用于实际滚动体——所以只认 html { scroll-behavior: smooth; }。

例外情况：如果你用的是自定义滚动容器（比如 .main-content { overflow-y: scroll; }），那 scroll-behavior 就得加在那个 .main-content 上，而不是 html。但单页应用默认滚动仍是 html，别被局部滚动干扰判断。

锚点 ID 必须合法且唯一，否则 :target 不触发

:target 是纯字符串匹配机制，不校验、不容错。以下任一条件不满足，样式就“消失”：

• ID 不能以数字开头：<section id="1section"> 是非法的，#1section:target 永远不生效
• ID 必须全局唯一：重复 ID（如两个 id="about"）会让浏览器无法确定目标，行为不可预测
• ID 必须与 URL hash 完全一致：大小写敏感，#FAQ 不会匹配 <p id="faq">；含空格或特殊字符（如 id="my section"）会导致 fragment 解析失败

固定导航栏遮挡？用 scroll-margin-top，别碰 padding/margin

平滑滚动后内容被 position: fixed 导航栏盖住，不是滚动错了，是浏览器把目标元素顶部对齐视口顶部。解决方案是给目标区块预留空间：

立即学习“前端免费学习笔记（深入）”；

.content-section { scroll-margin-top: 64px; }（数值 ≈ 导航栏高度）

不要用 padding-top + margin-top: -64px 这类老办法：会破坏文档流，影响可访问性、打印样式和 JS 的 getBoundingClientRect() 计算。也别用 scroll-padding-top——它作用于整个滚动容器，和锚点定位无关。

动态渲染（Vue/React）下 :target 失效，需手动 scrollIntoView

路由跳转时 hash 已存在，但目标元素还没挂载（比如 v-if 或 useState 初始为 false），:target 就永远“看不见”。这不是 CSS 能解决的问题。

必须等 DOM 更新后再调用：

element.scrollIntoView({ behavior: 'smooth', block: 'start' });

注意：即使全局设了 html { scroll-behavior: smooth; }，JS 调用 scrollIntoView() 仍需显式传 { behavior: 'smooth' }，否则默认是 'auto'。

真正难调的不是 CSS 写法，而是当目标区块由框架条件渲染、懒加载或异步插入时，hash 匹配和 DOM 存在时间不同步——这时候 CSS 方案完全失效，只能靠 JS 主动接管。