最可靠的方式是给 html 元素设置 scroll-behavior: smooth；body 上无效因主滚动容器是 html；js 触发需用 scrollintoview({ behavior: 'smooth' }) 并判空；ios safari 15.4+ 才原生支持，旧版本需手动降级；系统“减少运动”偏好会强制禁用所有平滑滚动。
直接加 html { scroll-behavior: smooth; } 就行，这是最轻量、最可靠的方式；其他方案要么多写 JS，要么兼容性差，还容易踩 Safari 或 iOS 的坑。
为什么写在 body 上无效
浏览器的主滚动容器是 html 元素，不是 body。即使你看到页面“在滚动”，实际受控的是 html；给 body 加 scroll-behavior: smooth 相当于对一个不负责滚动的元素设属性，自然没效果。
- 常见错误现象：
a[href="#section1"]点击后仍瞬间跳转，DevTools 里检查html元素样式发现该规则未命中（被覆盖、选择器失效或写在了body上） - 若页面嵌在 iframe 中，需确认当前文档的
html是顶层根节点，而非子框架内的 - 某些 CMS 或微前端环境会注入额外样式层，建议用 DevTools 的“Computed”面板直接查
html是否生效
scrollIntoView({ behavior: 'smooth' }) 什么时候必须用
当跳转逻辑由 JS 主动触发（比如表单校验失败后滚动到第一个错误字段、按钮点击定位、SPA 路由切换后滚动），就不能只靠 CSS，得调用这个方法。
- 必须先判空：
const el = document.getElementById('error-field'); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }，否则报Cannot read property 'scrollIntoView' of null -
block: 'center'比'start'更实用，能避免目标被固定头部遮挡 - 对
display: none、visibility: hidden或尚未挂载的元素（如 Vue 的v-if为 false 时），调用静默失败——不报错也不滚动 - IE 完全不支持该选项，需 fallback 到
scrollTop + requestAnimationFrame手动实现
iOS 和旧版浏览器的兼容性现实
scroll-behavior: smooth 在 iOS Safari 15.4+ 才真正支持；大量存量 iPhone（尤其是 iOS 15.3 及更早）完全忽略该 CSS 属性。这不是 bug，是 WebKit 实现延迟。
- 降级方案：监听
a[href^="#"]点击，用window.scrollTo()手动平滑滚动（注意要e.preventDefault()并计算目标 offset） - 不要在
touchmove中反复调用scrollTo——会中断原生手势，导致“卡住”或“跳变”，移动端回弹感直接消失 - Android WebView 若存在
overflow: hidden或position: fixed遮罩层，可能截断滚动事件，使 JS 滚动无响应
最容易被忽略的一点：系统级「减少运动」偏好（@media (prefers-reduced-motion: reduce)）会强制禁用所有平滑滚动，包括 CSS 和 JS 方案，这是浏览器合规行为，不是你的代码错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
