scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上在 Safari 和旧版 Chrome 中会被忽略；仅对原生锚点链接和 scrollIntoView() 默认调用生效，JS 硬跳、路由跳转等需显式传 behavior: 'smooth'。
scroll-behavior: smooth 必须写在 html 元素上才生效
90% 的“没反应”问题，根源是写在了 body 上。浏览器真正的滚动上下文绑定在 html 元素，哪怕你看到滚动条在窗口右侧、body 高度撑满，body { scroll-behavior: smooth; } 在 Safari 和部分旧版 Chrome 中会被直接忽略。
务必用开发者工具的 Computed 样式面板检查 html 元素，确认 scroll-behavior 值确实是 smooth，别只信源码里写了就完事。
-
html元素被overflow: hidden或height: 100vh锁死时，它就不再是滚动容器，该属性彻底无效 - 某些 CSS 重置（如
* { margin: 0; }）或 Normalize.css 可能意外清除了html的overflow，导致静默失效 - Next.js、Remix 等框架常注入 wrapper
div，需用 DevTools 查看实际滚动根元素是否仍是html
哪些操作能触发 scroll-behavior: smooth，哪些不能
它只对两类行为生效：用户点击原生锚点链接（），以及 JS 调用 element.scrollIntoView() 且未传 behavior 参数（即走默认行为）。
以下操作完全不受影响，会硬跳：
element.scrollTop = 100window.scrollTo(0, 200)- Vue/React 路由跳转（如
router.push('/about#contact')），因为不是原生锚点导航
想用 JS 实现平滑滚动，必须显式传参：element.scrollTo({ top: 100, behavior: 'smooth' }) 或 element.scrollIntoView({ behavior: 'smooth' })。
锚点滚动后内容被固定头部遮挡怎么办
这不是滚动错了，是浏览器把目标元素顶部对齐视口顶部，而 position: fixed 或 sticky 导航栏盖住了内容。手动减去 offsetTop 会破坏惯性、回弹和 scroll 事件时机。
正确做法是给目标元素加 scroll-margin-top：
-
h2[id] { scroll-margin-top: 60px; }—— 值建议等于导航栏高度 - 响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px); - 该属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 别误用
scroll-padding-top：它是作用于整个滚动视口的内边距，和锚点定位无关
iOS Safari 和旧 WebView 的兼容性现实
截至 2026 年 10 月，iOS Safari 15.4+ 才真正支持 scroll-behavior: smooth；更早版本（包括所有 iOS 14 及之前）完全不识别该属性。Android WebView 表现更碎片化，部分定制 ROM 内置 WebView 仍无支持。
这意味着：
- 仅靠 CSS 无法覆盖真实用户群，尤其企业内网或教育场景中仍有大量旧设备
- SPA 中路由跳转后的自动滚动（如 Vue Router 的
scrollBehavior）需手动包裹为scrollTo({ top: 0, behavior: 'smooth' })，否则首次加载或前进/后退时仍可能硬跳 - 动态渲染组件中，
id元素尚未挂载就点击链接，会静默失败或滚到顶部——这不是样式问题，是 DOM 时序问题
最易被忽略的一点：用户开启系统级「减少动画」偏好（prefers-reduced-motion: reduce）时，Chrome/Firefox/Safari 会静默禁用所有 behavior: 'smooth'，哪怕代码里写了也无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
