scroll-behavior: smooth 必须写在 html 元素上才生效，因浏览器根滚动容器是 html 而非 body；写在 body 无效，且不可同时加在两者上。
scroll-behavior 必须写在 html 上才生效
浏览器真正的根滚动容器是 html 元素，不是 body。写在 body 上完全无效，哪怕 DevTools 里能看到样式，点击锚点仍是瞬跳。
正确写法只有一行 CSS：
html { scroll-behavior: smooth; }
- 不要同时加在
html和body上，旧版 Chrome 可能直接忽略整个声明 - 若用了全局 CSS 重置（比如
* { margin: 0; }），检查是否意外把html的height或overflow改成了非默认值（如overflow: hidden） - 微前端或 CMS 框架可能包裹额外 DOM 层，可用
document.documentElement确认实际根节点是否仍是html
为什么加了 scroll-behavior: smooth 却没反应
常见失效原因不是语法错，而是滚动上下文或目标状态不满足基本前提。
- 页面内容高度不足一屏 → 没有可滚动空间，属性无意义
- 目标元素
display: none、visibility: hidden或被transform/overflow: hidden父级截断 → 滚动偏移计算失败或静默终止 - 锚点
href="#section1"对应的元素没有合法id="section1"（区分大小写、不可含空格、不支持name属性） - 系统开启了「减少动画」偏好（macOS/Windows 设置）→ 浏览器强制退化为
auto，且 polyfill 无法恢复
可主动降级适配：@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
scrollIntoView({ behavior: 'smooth' }) 怎么用才不翻车
它和 scroll-behavior: smooth 是协同关系，不是替代关系——前者显式触发，后者提供默认行为。
- 必须先判断元素存在：
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });，否则静默失败（控制台不报错） -
block: 'start'最稳妥；若要避开固定头部，优先用 CSS 的scroll-margin-top: 80px，而非 JS 手动算 offset - 用户快速连点多次会触发并发滚动 → 必须节流，推荐用
setTimeout+ 标志位，或lodash.throttle - 动态渲染场景（Vue
v-if、React 条件返回）中，确保调用时机在元素已挂载且可见之后
局部容器平滑滚动要配齐三要素
给 div 这类自定义容器加 scroll-behavior: smooth，光写属性不够。
- 容器必须有明确高度（如
height: 400px或max-height: 300px） - 必须设
overflow-y: auto（或scroll），且内部内容真实溢出 - 仅当该容器自身是滚动源时才生效；父级或视口滚动不受影响
典型错误：只加 scroll-behavior: smooth，但忘了 overflow 或高度限制 → 容器根本不可滚动，属性形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
