scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上无效；仅对锚点跳转和 scrollintoview() 生效，window.scrollto() 等 js 滚动需显式传参 { behavior: 'smooth' }，且受 ios safari 版本、系统“减少动画”偏好及滚动容器是否正确设置等多重限制。
scroll-behavior: smooth 必须写在 html 元素上才生效，否则 90% 的“没反应”都源于此；它只对锚点跳转和 scrollIntoView() 生效，window.scrollTo() 等 JS 主动滚动仍需显式传参。
为什么写了 scroll-behavior: smooth 却还是硬跳？
不是属性写错了，而是作用对象错了——浏览器真正的页面级滚动容器是 html 元素，不是 body。
-
body { scroll-behavior: smooth; }在 Safari（尤其是 ≤15.3）和多数移动端 WebView 中完全无效，Chrome/Firefox 可能“碰巧”生效，但不可靠 - 务必用
html { scroll-behavior: smooth; }，并在开发者工具的 Computed 样式中确认该值确为smooth - CSS 重置（如
* { margin: 0; }或 Normalize.css）可能意外将html的overflow设为hidden，导致该属性静默失效 - 若页面存在自定义滚动容器（如
div.content设了overflow-y: auto），需单独给它加scroll-behavior: smooth，和html无关
scrollIntoView() 和 window.scrollTo() 为何不平滑？
即使 html 已设 scroll-behavior: smooth，JS 调用也不会自动继承该行为。这是设计使然：CSS 是声明式兜底，JS API 行为由参数决定。
-
element.scrollIntoView()必须写成：element.scrollIntoView({ behavior: 'smooth', block: 'start' });—— 缺少{ behavior: 'smooth' }就是瞬时滚动 -
window.scrollTo()必须写成：window.scrollTo({ top: 200, behavior: 'smooth' });—— 旧写法window.scrollTo(0, 200)不触发平滑 - Vue/React 动态渲染后立即调用，目标元素可能尚未挂载，建议包裹在
requestAnimationFrame中延迟一帧 - 父容器有
overflow: hidden或transform会创建新的滚动上下文，导致滚动被截断
锚点跳转后内容被导航栏遮住怎么办？
这不是滚动不准，是浏览器默认把目标元素顶部对齐视口顶部，而 position: sticky 或 fixed 导航栏盖住了内容。
- 在目标元素上加
scroll-margin-top: 60px;（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留空白 - 优先用
px或rem，避免用%—— 计算时机不稳定，尤其在 resize 或字体缩放后容易错位 - 若导航栏高度动态变化（如折叠/展开），纯 CSS 难覆盖，应改用
element.scrollIntoView({ block: 'start', behavior: 'smooth' })+padding-top补偿 -
scroll-margin-top只对锚点跳转和scrollIntoView()生效，对scrollTo()无效
iOS Safari 和系统“减少动画”偏好如何影响效果？
这些限制不会报错，而是静默降级，最容易被忽略。
- iOS Safari ≤15.3 完全不支持
scroll-behavior: smooth和behavior: 'smooth'参数；15.4+ 才开始支持，但 15.4–16.0 版本极不稳定，常卡顿或跳帧 - 用户开启系统“减少动画”（
prefers-reduced-motion: reduce），Chrome/Firefox/Safari 都会强制禁用所有smooth行为 - 单页应用（Vue Router / React Router）中，路由跳转不会触发该 CSS 属性，必须手动监听路由变更并调用
scrollIntoView({ behavior: 'smooth' }) - 不要依赖
@supports (scroll-behavior: smooth)做兼容判断——它只检测 CSS 属性是否存在，不反映 JS 行为是否可用
真正麻烦的不是写法本身，而是各种边界条件叠加：滚动容器判断错误、目标元素未挂载、系统偏好干扰、移动端版本碎片化——这些组合起来，才是线上环境里平滑滚动频繁失效的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
