直接在html标签上加scroll-behavior: smooth即可全局启用平滑滚动，但仅对原生锚点跳转和scrollIntoView()生效；失效主因是写在body上、目标元素不可见或被系统“减少动画”偏好禁用。
直接在 html 标签上加 scroll-behavior: smooth 就能全局启用平滑滚动，但只对原生锚点跳转和 scrollIntoView() 生效，JavaScript 手动调用 scrollTop 不会触发它。
为什么加了 scroll-behavior: smooth 却没效果？
常见原因有三个：
- 样式没写对位置：必须写在
html元素上（不是body），例如html { scroll-behavior: smooth; } - 浏览器不支持：IE 完全不支持，旧版 Safari（@supports (scroll-behavior: smooth) 检测
- 触发方式不对：只有 CSS 定义的滚动行为才影响
<a href="#id">和element.scrollIntoView()，而element.scrollTop = 100或window.scrollTo(0, 100)仍为瞬时滚动
scrollIntoView() 怎么配合 scroll-behavior: smooth 用？
它默认继承 html 的 scroll-behavior 值，但你可以显式覆盖：
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
注意：
立即学习“前端免费学习笔记（深入）”；
-
behavior: 'smooth'是关键，即使 CSS 已设，显式传入更可靠（尤其兼容性兜底） -
block控制垂直对齐（'start'/'center'/'end'），inline控制水平对齐（需父容器有direction或writing-mode） - 在 React/Vue 等框架中，确保调用时元素已挂载且尺寸可计算，否则可能滚动到错误位置
想让 window.scrollTo() 也平滑？只能靠 JS 参数
scroll-behavior: smooth 对 window.scrollTo() 无效，必须用其新参数形式：
window.scrollTo({ top: 200, left: 0, behavior: 'smooth' });
替代旧写法 window.scrollTo(0, 200)。同样适用于 scrollBy()：
window.scrollBy({ top: 100, behavior: 'smooth' });
要点：
- 旧版 Safari 需要 polyfill（如
scroll-behavior-polyfill），但现代项目建议优先检测后降级为behavior: 'auto' - 频繁调用（如滚动监听中）会导致动画卡顿，应节流或改用 CSS
scroll-snap替代 - 移动端 WebView（如微信内置浏览器）部分版本对
behavior: 'smooth'支持不稳定，实测比桌面端更容易回退为瞬时
真正容易被忽略的是：平滑滚动会阻塞后续同步脚本执行（比如你紧接着调用 getBoundingClientRect()，可能拿到滚动前的位置），需要监听 scrollend 事件或用 setTimeout(..., 0) 延迟读取。这个细节在表单校验后自动滚动到错误字段时特别容易出错。
