scroll-behavior 必须写在 html 元素上才有效，body 上无效；它仅影响锚点跳转和 scrollintoview()，不作用于 window.scrollto()；多滚动容器需单独设置；spa 中需配合路由钩子手动触发平滑滚动。
scroll-behavior 必须写在 html 元素上才有效
写在 body 上基本没反应，因为多数浏览器中 body 不是真实滚动容器，真正承载视口滚动的是 html 元素。很多开发者一上来就试 body { scroll-behavior: smooth; }，结果点击锚链接毫无动画，就是卡在这一步。
正确做法只有一行：
html { scroll-behavior: smooth; }
- 该声明影响所有由用户触发的锚点跳转（如
<a href="#section2"></a>） - 也控制 JavaScript 调用
element.scrollIntoView()时的默认行为 - 但不会改变
window.scrollTo()的表现——它仍会瞬间跳转，除非你显式传入{ behavior: 'smooth' }
scrollIntoView() 和 window.scrollTo() 的行为差异
scroll-behavior: smooth 是“被动生效”的：它只接管那些未被 JS 显式干预的滚动动作。一旦你在代码里调用 window.scrollTo() 或 scrollBy()，浏览器就按你写的参数执行，完全忽略 CSS 设置。
所以常见错误是：页面设置了 html { scroll-behavior: smooth; }，但路由跳转后手动调用了 window.scrollTo(0, 0)，结果顶部跳转依然生硬。
- 想让 JS 滚动也平滑 → 必须写成
element.scrollIntoView({ behavior: 'smooth' }) - 或
window.scrollTo({ top: 0, behavior: 'smooth' }) - 注意：IE 和旧版 Safari 不支持
behavior: 'smooth'参数，会静默退化为auto
多滚动容器需单独设置 scroll-behavior
一个页面可能有多个自定义滚动区，比如侧边栏、卡片列表、弹窗内容区。这些容器通常带有 overflow: auto 或 scroll，它们各自构成独立滚动上下文。
html { scroll-behavior: smooth; } 对它们完全无效。必须给每个容器单独加样式：
.sidebar { overflow-y: auto; scroll-behavior: smooth; }
.card-list { height: 400px; overflow: scroll; scroll-behavior: smooth; }
- 不设
overflow的元素即使写了scroll-behavior也不会生效 - 嵌套滚动容器之间互不影响；父容器设了
smooth，子容器仍需自己设 - 移动端 iOS Safari 15.4 之前完全不支持该属性，且无法用 polyfill 完美模拟——底层滚动管线不可替换
单页应用（SPA）中 scroll-behavior 不自动生效
Vue Router、React Router 的路由切换不是锚点导航，也不调用 scrollIntoView()，所以 html { scroll-behavior: smooth; } 在这里形同虚设。
必须靠路由钩子或状态监听主动滚动：
- Vue Router：在
scrollBehavior配置中返回{ behavior: 'smooth' } - React Router v6：用
useEffect监听location.key，再调用document.getElementById('main').scrollIntoView({ behavior: 'smooth' }) - 纯 JS SPA：监听
popstate或hashchange，然后执行带behavior: 'smooth'的滚动
漏掉这一步，用户点导航时页面“唰”一下跳到顶部，平滑效果就断了——这不是 CSS 写错了，而是滚动触发时机没对上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
