html { scroll-behavior: smooth } 必须作用于 html 元素，因浏览器主滚动容器是 html 而非 body；写在 body 上无效，属最常见错误；需检查 DevTools 中 html 元素的 computed 样式是否生效，并排除重置样式、系统偏好及目标元素可见性等干扰因素。
html { scroll-behavior: smooth } 必须写在 html 上，不是 body
写了 body { scroll-behavior: smooth; } 却没效果？这是最常踩的坑。浏览器的主滚动容器是 html 元素，body 只是内容流容器，不参与视口滚动控制。CSS 的 scroll-behavior 属性必须作用于实际滚动层，否则静默失效。
检查方式：打开 DevTools → 选中 html 元素 → 看 Styles 面板里是否有生效的 scroll-behavior: smooth；如果只在 body 上写了，那里不会出现该声明。
- 别同时写
html和body两个地方，旧版 Chrome（≤75）可能因优先级冲突直接忽略 - 若项目用了 CSS reset 或 normalize，留意是否被
html { scroll-behavior: auto !important; }覆盖 - 某些微前端框架会动态注入 iframe 或重置根节点，需确认当前文档的
html是真实根元素
锚点跳转失效时，先查 id、可见性与系统偏好
加了 scroll-behavior: smooth 后点击链接仍瞬间跳转或不动，90% 不是 CSS 问题，而是目标不可达：
- 目标元素缺失
id属性，或大小写/拼写不一致（id="Section1"和href="#section1"不匹配） - 目标被
display: none、visibility: hidden隐藏，或由v-if/*ngIf控制且未渲染 - 用户开启了系统级「减少运动」设置：
@media (prefers-reduced-motion: reduce)下，所有behavior: 'smooth'会被浏览器强制降级为auto，属预期行为 -
<a>标签被 JS 拦截（如 SPA 路由），但没手动调用scrollIntoView，导致链接无响应
JS 主动滚动要用 scrollIntoView({ behavior: 'smooth' })，不是 scrollTo
表单校验失败后滚动到首个错误字段、按钮触发定位等场景，不能依赖 CSS，得用 JS 主动控制。此时 scrollIntoView 比 window.scrollTo 更直观可靠：
立即学习“前端免费学习笔记（深入）”；
- 必须先判空：
if (el) el.scrollIntoView(...)，否则Cannot read property 'scrollIntoView' of null - 推荐
block: 'center'，避免被固定头部遮挡；block: 'start'在有 sticky 导航时容易切掉顶部内容 - 对
display: none或未挂载元素调用会静默失败，不报错也不滚动——Vue/React 中务必等nextTick或useEffect完成后再调 - IE 完全不支持该选项，如需兼容，得 fallback 到
scrollTop + requestAnimationFrame手动实现
移动端 Safari 15.4 以下版本不支持 scroll-behavior: smooth
iOS 15.4 是分水岭。此前所有 iPhone（包括大量仍在使用的 iOS 14.x 设备）都会忽略该 CSS 属性，表现为纯瞬时跳转。这不是 bug，是 WebKit 实现延迟。
若目标用户含存量 iOS 设备，必须提供降级方案：
- 用
scrollIntoView替代纯 CSS 方案（注意上述判空和渲染时机） - 避免在
touchmove事件中调用scrollTo—— 会中断原生手势，导致“卡住”或丢失回弹 - 慎用
-webkit-overflow-scrolling: touch：iOS 12–14 下它会削弱弹性系数，让松手后滚动距离变短、减速过快，反而破坏体验 - 局部滚动容器（如聊天记录框）启用
scroll-behavior: smooth前，确保其有明确height和overflow: auto，否则属性无效
真正难处理的不是“怎么加平滑”，而是“什么时候不该加”：比如目标元素被 fieldset[disabled] 包裹、或父级设置了 transform 导致滚动上下文隔离，scrollIntoView 会失败且毫无提示——得一层层检查可交互性、渲染状态和 CSS 层叠影响。
