scroll-behavior必须写在html元素上而非body，因浏览器实际滚动容器是html；它仅对原生锚点点击和未指定behavior的scrollintoview生效，不作用于scrollto、键盘滚动或路由跳转，且受css重置、固定定位遮罩、系统动画偏好及dom渲染状态影响。
scroll-behavior必须写在html上，不是body
浏览器实际滚动容器是html元素，body只是内容容器。写body { scroll-behavior: smooth; }几乎必然失效——DevTools里查html的computed值，如果scroll-behavior仍是auto，就说明没生效。
常见错误包括：
- 重置CSS（如normalize.css）里带
html { scroll-behavior: auto !important; }，直接覆盖你的规则 - 同时写了
html和body两个声明，旧版Chrome会取body值并降级为auto - 页面用了
position: fixed全屏遮罩，导致html失去滚动权，真实滚动容器变成遮罩层内部
锚点跳转不平滑？先确认是否真触发了scroll-behavior
scroll-behavior: smooth只对两类操作生效：原生<a href="#section"></a>点击、以及未传behavior参数的element.scrollIntoView()。它不管window.scrollTo(0, 100)、element.scrollTop = 200、键盘滚动，也不管Vue Router或React Router的push跳转。
所以如果你点了链接却“啪”一下跳过去，检查：
- 目标元素是否存在且
id拼写完全一致（大小写敏感） - 目标元素没有
display: none或visibility: hidden，也没有被v-if/ngIf等条件渲染逻辑暂时移除 - 页面高度足够滚动——
document.documentElement.scrollHeight 时，<code>scroll-behavior根本不会启动 - 用户开启了系统级「减少动画」偏好，浏览器会静默禁用，不报错也不提示
局部滚动容器要单独设scroll-behavior
像聊天记录区、侧边栏菜单这类固定高度+overflow-y: auto的容器，scroll-behavior不能靠继承，必须显式加在该容器上：
.chat-history {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}
但前提是该容器真正可滚动——即内容高度超过400px，且没有overflow: hidden父级截断。如果容器内元素是懒加载的（比如tab切换后才渲染），调用scrollIntoView()前得确保DOM已挂载，否则静默失败。
SPA中锚点跳转失效的典型补救方式
路由库（如React Router、Vue Router）会拦截<a href="#about"></a>的默认行为，导致scroll-behavior完全不触发。此时必须手动接管：
- 监听
hashchange或路由onPopState事件 - 用
e.preventDefault()阻止默认跳转 - 调用
document.getElementById(hash.slice(1)).scrollIntoView({ behavior: 'smooth' }) - 若目标在动态区域（如折叠面板展开后才出现），需加
setTimeout或requestAnimationFrame延后执行
最易被忽略的是：当目标元素被fieldset[disabled]包裹，或父级有overflow: hidden，scrollIntoView会找不到有效滚动上下文，最终滚不到位——这种问题不会报错，只会“看起来没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
