scroll-behavior: smooth 仅对 html 元素生效，控制锚点跳转和 scrollintoview() 的平滑滚动；不作用于 window.scrollto()、spa 路由切换或 body 元素，多滚动容器需单独设置，兼容性需按浏览器版本处理。
直接用 scroll-behavior: smooth 就能实现页面内锚点跳转的平滑滚动，但仅对原生 <a href="#id"></a> 和 JavaScript 的 element.scrollIntoView() 生效，不控制 window.scrollTo() 的行为（除非显式加 behavior: 'smooth'）。
哪些地方写 scroll-behavior 才有效
必须写在根滚动容器上，通常是 html 元素；写在 body 上基本无效（因为多数浏览器里 body 不是真实滚动容器）。
常见错误写法：body { scroll-behavior: smooth; } → 大概率没反应。
正确写法：
html {
scroll-behavior: smooth;
}
注意：该声明只影响由用户触发的导航（如点击锚链接）或调用 scrollIntoView() 时的默认滚动行为，不影响 JS 主动调用 window.scrollTo() —— 后者需手动指定 { behavior: 'smooth' }。
scroll-behavior 在单页应用（SPA）里的局限性
Vue/React 路由切换时，scroll-behavior: smooth 不会自动生效，因为路由跳转不触发原生锚点导航，也不会调用 scrollIntoView()。
需要配合路由钩子手动处理：
- Vue Router：在
scrollBehavior配置中返回{ behavior: 'smooth' }对象，或调用el.scrollIntoView({ behavior: 'smooth' }) - React Router v6：用
useEffect监听location.key，再调用document.getElementById('main').scrollIntoView({ behavior: 'smooth' }) - 纯 JS SPA：监听 URL 变化后，手动执行带
behavior: 'smooth'的滚动操作
漏掉这一步，页面“唰”一下跳到顶部，平滑效果就断了。
兼容性和降级处理要点
scroll-behavior 在 Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+ 支持；iOS Safari 15.4 之前完全不支持，且无法通过 polyfill 完美模拟（因涉及底层滚动管线）。
不建议为兼容老浏览器强上 JS 滚动动画库（如 smooth-scroll），容易和原生行为冲突，反而导致卡顿或重复滚动。
更稳妥的做法：
- 保留
html { scroll-behavior: smooth; }作为现代浏览器的默认行为 - 对不支持的环境，不做任何干预——自然滚动虽生硬，但稳定可靠
- 避免同时引入 CSS + JS 双重平滑逻辑（比如既设
scroll-behavior，又给所有a[href^="#"]绑preventDefault()+scrollTo）
真正容易被忽略的是：当页面存在多个滚动上下文（如侧边栏固定高度 + overflow: auto），scroll-behavior 只作用于它所在的那个容器，不会“穿透”到父或子滚动区。这时候得单独给对应容器设置，而不是只盯 html。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
