scroll-behavior: smooth 必须作用于 html 元素才生效，因根滚动容器是 html 而非 body；常见失效原因包括被重置样式覆盖、iframe 干扰、html 不可滚动等；动态滚动需用 scrollintoview({ behavior: 'smooth' }) 并判空及设置 block: 'center'；锚点偏移应优先用 scroll-margin-top 而非 js 计算；系统“减少运动”偏好会静默降级为 auto，不可绕过。
scroll-behavior: smooth 必须写在 html 元素上
写在 body 或通配符 * 上完全无效——浏览器的根滚动容器是 html 元素，不是 body。哪怕你在 DevTools 里看到 body 在动，底层滚动层仍是 html。
常见失效原因包括：
-
html { scroll-behavior: smooth; }被第三方 reset 样式覆盖，比如html, body { scroll-behavior: auto !important; } - 微前端或 CMS 注入了 iframe，导致
document.documentElement不是真实根节点 - 页面设置了
html { height: 100%; overflow: hidden; }，让根元素实际不可滚动
验证是否生效：打开 DevTools → 选中 html 元素 → 在 Computed 面板搜索 scroll-behavior，确认值为 smooth 且无 !important 覆盖。
scrollIntoView({ behavior: 'smooth' }) 用于动态触发场景
当点击按钮、表单校验后跳转、或 SPA 中路由变化时，scroll-behavior: smooth 不会自动响应，必须用 JS 主动调用 scrollIntoView。
关键注意事项：
- 必须先判空：
if (el && el.offsetParent) el.scrollIntoView({ behavior: 'smooth', block: 'center' });——offsetParent === null表示元素被display: none、未挂载，或父级有pointer-events: none -
block: 'center'比'start'更安全，避免固定头部遮挡；若需精确留白，优先用 CSS 的scroll-margin-top，而非 JS 计算偏移 - 在 React 中确保在
useEffect（或useLayoutEffect）里操作 ref；Vue 中用nextTick等待 DOM 渲染完成
scroll-margin-top 是解决固定头部遮挡的正确姿势
别在 JS 里手动减去 header 高度——响应式变化或字体加载后，计算极易错位。CSS 的 scroll-margin-top 是浏览器原生支持的锚点终点修正机制。
推荐写法：
- 简单固定高度：
section[id] { scroll-margin-top: 64px; } - 响应式适配：
h2[id] { scroll-margin-top: clamp(48px, 8vh, 72px); } - 避免误用
scroll-padding-top：它作用于整个视口，和锚点定位无关，加了反而错位
该属性与 scrollIntoView 的 block 参数可共存：block: 'center' 保证居中，scroll-margin-top 微调起点，鲁棒性更高。
系统偏好会静默降级平滑行为
用户开启「减少运动」系统设置时，所有 behavior: 'smooth'（包括 scroll-behavior: smooth 和 scrollIntoView）都会被浏览器强制退化为 'auto'，不报错、不可绕过、也不触发 scroll 事件。
这意味着：
- 不能依赖
scroll事件监听平滑滚动过程——它根本不会触发 - 不要为「减少运动」用户单独实现 JS 动画补偿：这违背 WCAG 原则，且浏览器已按用户意愿降级
- 若需同步状态（如高亮导航项），应监听
hashchange或popstate，而非滚动事件
真正容易被忽略的，是目标元素的交互可达性——比如被 fieldset[disabled] 包裹，或父级有 overflow: hidden 截断滚动上下文，这时 scrollIntoView 会静默失败，连控制台警告都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
