正确写法是html { scroll-behavior: smooth; }，因滚动由html元素承载；href与id须严格匹配；固定头部遮挡时用scroll-margin-top补偿；局部滚动容器需单独设置该属性。
直接给 html 元素加 scroll-behavior: smooth 就行，90% 的“跳转不平滑”问题都出在这一步没写对位置。
为什么只写 body { scroll-behavior: smooth } 不生效
因为 scroll-behavior 必须作用在**实际发生滚动的容器**上。在标准文档流中，视口滚动由 html 元素承载，body 默认不是滚动容器（即使它看起来在动）。浏览器会忽略写在 body 上的该声明。
- ✅ 正确写法：
html { scroll-behavior: smooth; } - ❌ 错误写法：
body { scroll-behavior: smooth; }、* { scroll-behavior: smooth; }、.wrapper { scroll-behavior: smooth; }（除非它才是滚动容器） - 检查方式：打开开发者工具 → 选中
html元素 → 查看 computed 样式里scroll-behavior是否为smooth，且未被!important覆盖
href 和 id 必须严格匹配才能触发滚动
锚点跳转是原生行为，不报错也不警告，错了一点就静默失败。
- 链接必须用
href="#about"，目标元素必须有对应id="about"——class、data-id、name属性都不行 - ID 值不能以数字开头（如
id="1-section"在 Safari 旧版可能失效），推荐用id="section-1" - ID 中不能含空格或中文，
id="联系我们"或id="contact us"都会导致跳转中断 - 同一页面不能有重复
id，否则滚动只定位到第一个匹配元素
固定头部遮挡目标内容？用 scroll-margin-top 补偿
默认滚动会把目标元素顶部贴到视口顶部，但如果有 position: fixed 的导航栏，内容就会被盖住。
- 不要用
margin-top或负padding挤开目标元素——这会破坏布局，且不解决定位逻辑 - 正确做法：给目标元素本身加
scroll-margin-top，例如：h2[id] { scroll-margin-top: 64px; } - 这个值应等于固定头部高度（含 border/padding），支持 px、rem、vh 等单位
- 注意：该属性只在目标元素处于可滚动上下文内才生效；若目标在 Shadow DOM 或 iframe 中，需单独设置
局部滚动容器（如弹窗、侧边栏）怎么启用平滑滚动
当页面滚动区域不是整个视口，而是某个带 overflow-y: auto 的 div 时，html { scroll-behavior: smooth } 完全无效。
- 必须把
scroll-behavior: smooth写在那个具体容器上，比如：.sidebar { overflow-y: auto; scroll-behavior: smooth; } - 确保目标元素（带
id）也在同一个容器内部，跨容器跳转不会触发布局内平滑滚动 - 如果容器用了
contain: paint或transform，可能干扰滚动计算，临时移除测试是否恢复
真正容易被忽略的是：平滑滚动不是“开了就一定动”，它依赖完整的滚动上下文链——从 html 或容器的声明，到 href/id 的精确匹配，再到目标可见性与定位偏移的协同。少一个环节，就退回“啪”一下的瞬移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
