scroll-behavior: smooth 无反应的主因是样式未生效于 html 根元素或滚动行为绕过 CSS 控制；需确保写在 html 上且未被覆盖，JS 的 scrollIntoView 或 scrollTo 可独立启用平滑滚动。
scroll-behavior: smooth 为什么加了没反应
常见现象是写了 html { scroll-behavior: smooth; }，但点击锚点或调用 scrollTo() 仍无动画。核心原因只有两个：一是样式没生效到根元素，二是触发滚动的行为本身绕过了 CSS 控制。
- 必须写在
html元素上（不是body），且不能被更具体的规则覆盖；可用浏览器开发者工具检查 computed 样式里scroll-behavior是否为smooth -
scrollIntoView({ behavior: 'smooth' })和scrollTo({ behavior: 'smooth' })是 JS 层面的平滑滚动，它们不依赖 CSS，但若同时设置了 CSS 的scroll-behavior，JS 调用会优先走自己的行为配置 - 部分旧版 Safari（hashchange 后手动补 JS 动画）
锚点跳转时滚动偏移或错位
加了 scroll-behavior: smooth 后，点击 跳转，目标元素顶部被导航栏遮住——这是最常被忽略的兼容性细节。
- CSS 滚动本身不感知页面布局，它只把目标元素的 top 对齐视口顶部；如果页面有固定定位的
header，就得靠scroll-margin-top补偿 - 在目标元素（如
）上加scroll-margin-top: 60px;，值等于导航栏高度，浏览器会在平滑滚动结束时自动预留这段空白 - 注意：这个属性只对通过锚点或
scrollIntoView()触发的滚动生效，对scrollTo()无效
scroll-behavior 在单页应用（SPA）中失效
Vue Router 或 React Router 切换路由后，scroll-behavior: smooth 不起作用，因为浏览器没触发原生锚点跳转，而是 JS 动态更新 DOM。
- 必须手动调用
element.scrollIntoView({ behavior: 'smooth' })或window.scrollTo()，CSS 属性此时完全不参与 - Vue Router v4+ 提供
scrollBehavior配置函数，React Router v6 推荐用useEffect+scrollIntoView组合处理 - 别在路由守卫里直接操作
window.scrollTo(0, 0)，这会打断平滑动画；应统一用带{ behavior: 'smooth' }的版本
性能与可访问性影响
看似只是加个 CSS 属性，但它会影响滚动事件频率、焦点管理，甚至屏幕阅读器行为。
- 开启平滑滚动后，
scroll事件触发更频繁（尤其在低端设备上），如果监听了该事件做节流计算，要注意性能开销 - 部分屏幕阅读器（如 NVDA）在平滑滚动期间可能暂停朗读，用户会误以为页面卡死；建议保留键盘
Tab导航路径完整，不要依赖纯视觉滚动提示 - 移动端 Safari 对
scroll-behavior的实现较保守，有时会降级为普通滚动，无法强制；别把它当作交互动画的核心依赖
真正难的不是加那行 CSS，而是判断什么时候该用它、什么时候必须切到 JS 控制，以及怎么让不同触发路径下的滚动体验保持一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
