直接加html { scroll-behavior: smooth; }即可全局启用平滑滚动，但必须写在html元素上（非body），且需确保目标元素存在、可见、未被overflow/transform截断滚动上下文，并尊重系统“减少动画”偏好设置。
直接加 html { scroll-behavior: smooth; } 就能全局启用平滑滚动，但多数人卡在写错位置、目标不可见或系统禁用动画上。
scroll-behavior 必须写在 html 上才生效
浏览器的根滚动容器是 html 元素，不是 body —— 写在 body 上完全无效，点击锚点仍是瞬跳。常见错误是 DevTools 里看到 body 样式有该属性，但实际没作用。
- 正确写法只有一行：
html { scroll-behavior: smooth; } - 不要同时加在
html和body上，旧版 Chrome 可能直接忽略 - 若用了 CSS 重置（如
* { margin: 0; }），确认没把html的height或overflow改成非默认值 - 微前端或 CMS 框架可能包裹额外 DOM，可用
document.documentElement检查根节点是否仍是html
scrollIntoView({ behavior: 'smooth' }) 触发前必须确保元素存在且可见
动态渲染场景（Vue 的 v-if、React 的条件渲染）下，getElementById 可能返回 null，调用会静默失败，控制台不报错但滚动不动。
- 务必先判断：
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); - 目标元素不能是
display: none、visibility: hidden或opacity: 0；否则偏移计算失准或直接失效 - 父级有
overflow: hidden或transform会截断滚动上下文，此时应改用window.scrollTo手动控制 -
block推荐设为'start'（对齐顶部），若需避开固定头部，优先用 CSS 的scroll-margin-top: 80px，而非 JS 算偏移
系统开启「减少动画」时，scroll-behavior: smooth 会被强制禁用
macOS / Windows 设置中启用「减少运动」后，所有原生平滑滚动（包括 scroll-behavior 和 scrollTo({ behavior: 'smooth' })）都会退化为瞬跳——这是浏览器行为，不是 bug，也无法用 polyfill 还原。
- 可通过媒体查询检测：
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } - 不建议强行覆盖用户偏好；若业务强依赖滚动动画，应在 UI 中提供明确开关并注明影响
- polyfill（如
smoothscroll-polyfill）仅对不支持该特性的老浏览器有效，在已支持但被系统禁用的环境下不起作用
最易被忽略的是：滚动容器是否真正“可滚动”。scroll-behavior 不会创造滚动能力，它只修饰已有滚动行为。如果页面内容高度不足一屏，或局部容器没有 overflow: auto，加了也白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
