必须写在html元素上，因浏览器滚动根容器是html而非body；body上无效，通配符不继承且易被覆盖；正确写法为html{scroll-behavior:smooth}。
直接在 html 元素上写 scroll-behavior: smooth; 就行，这是唯一可靠、零 JS、全局生效的方案。
为什么必须写在 html 上，而不是 body 或通配符？
浏览器的滚动上下文根是视口（viewport），它绑定在 html 元素上，不是 body。写在 body 上完全无效——开发者工具里能看到 computed 样式里 scroll-behavior 仍是 auto。写 * { scroll-behavior: smooth; } 也不行，因为该属性不继承，且通配符优先级低，容易被重置样式覆盖。
常见错误现象：href="#contact" 点击后仍“瞬移”，检查 html 元素的 computed 样式，若不是 smooth，八成是写错位置或被 !important 覆盖。
- 正确写法：
html { scroll-behavior: smooth; } - 务必放在全局 CSS 中，不要包裹在
@media或@supports里（除非你明确要降级） - 如果用了 UI 框架（如 Ant Design、Bootstrap），检查其重置样式是否含
html, body { scroll-behavior: auto !important; }，需手动覆盖
scroll-behavior: smooth 生效范围和边界条件
它只对原生锚点跳转（<a href="#id">）、window.scrollTo()（未显式传 behavior 时）、element.scrollIntoView()（未传 behavior 时）起作用。不是“所有滚动都变平滑”，而是“所有由浏览器默认触发的滚动行为”被接管。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的失效原因：
- 目标元素
id不存在，或拼写不一致（大小写敏感） - 目标元素被
display: none、visibility: hidden隐藏，或父容器有overflow: hidden截断布局流 - 页面用了 Shadow DOM，
scroll-behavior不穿透边界，需在 shadow root 内单独设置 - 用户开启了系统级“减少动画”偏好（
prefers-reduced-motion: reduce），部分浏览器会自动禁用该效果
局部滚动容器也要平滑？别动 html，改容器本身
如果页面有自定义滚动区（比如聊天记录框、侧边菜单、SPA 路由容器），它的滚动行为不受 html 上的 scroll-behavior 影响。因为真正发生滚动的是那个 overflow-y: auto 的容器，不是整个视口。
例如一个聊天历史区域：
.chat-history {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}关键点：
- 必须同时满足：有固定高度/最大高度 +
overflow-y: auto或scroll+ 内容溢出 - 不能只靠
scroll-behavior: smooth就指望它可滚动；没有溢出，该属性无意义 - SPA 中点击路由链接不触发滚动？那是因为前端路由拦截了
a默认行为，scroll-behavior失效，此时必须用 JS 调用element.scrollIntoView({ behavior: 'smooth' })
固定头部遮挡目标元素？CSS 方案比 JS 更稳
启用 scroll-behavior: smooth 后，目标元素顶部常被 position: fixed 的导航栏盖住。最推荐的解法不是 JS 计算偏移，而是用 scroll-margin-top：
section {
scroll-margin-top: 80px;
}这个值应等于固定头部高度。优势在于：
- 纯 CSS，无需监听事件或节流
- 对
scrollIntoView和原生锚点跳转都生效 - 不会因 JS 执行时机问题导致错位（比如内容动态加载后才执行滚动）
- 比在目标元素上加
margin-top: -80px+padding-top: 80px更干净，不破坏文档流
真正难搞的从来不是怎么加平滑，而是确保滚动上下文存在、目标可见、偏移对齐——这些细节一漏，scroll-behavior: smooth 就只是个摆设。
