scroll-behavior: smooth没反应主因是作用对象错误：必须写在html元素上（非body或div）才生效于全局锚点跳转；仅对原生锚点和scrollIntoView()有效，JS手动滚动需显式传{behavior:'smooth'}，且受Safari≤15.3、系统“减少动画”等限制。
scroll-behavior: smooth 为什么加了没反应
加了 scroll-behavior: smooth 却没滚动效果，大概率是作用对象错了——它必须写在 html 或 body 元素上，写在某个 div 上只对那个容器内部的滚动生效（比如 overflow:auto 的区域），对整个页面跳转锚点无效。
常见错误写法：section { scroll-behavior: smooth; } —— 这不会影响 <a href="#target"></a> 的页面级跳转。
正确写法只有两种：
-
html { scroll-behavior: smooth; }（推荐，兼容性好，覆盖全局） -
body { scroll-behavior: smooth; }（部分旧版 Safari 可能不识别 body 上的该声明）
锚点跳转失效或跳偏的几个硬坑
即使 scroll-behavior 生效，跳转仍可能失败或定位不准，原因常出在目标元素本身：
立即学习“前端免费学习笔记（深入）”；
- 目标元素（如
<h2 id="section2"></h2>）被position: absolute或transform移动过，浏览器可能无法准确计算其视口位置 - 目标元素高度为 0 或被
visibility: hidden/opacity: 0隐藏（display: none更糟，完全脱离布局流） - 页面有固定头部（
position: fixed），但没做滚动偏移补偿，导致目标被遮挡
解决偏移问题最轻量的方式是给目标元素加 scroll-margin-top，例如：h2[id] { scroll-margin-top: 80px; }，这样滚动终点会自动上移 80px，避开 fixed header。
JavaScript 滚动控制与 scroll-behavior 的关系
scroll-behavior: smooth 只影响原生锚点跳转（<a href="#id"></a>）和 element.scrollIntoView() 的默认行为，不影响 window.scrollTo() 等手动调用——后者需显式传入 { behavior: 'smooth' }。
注意两者共存时的行为差异：
-
document.getElementById('target').scrollIntoView();→ 自动走 smooth（前提是html上设了scroll-behavior） -
window.scrollTo(0, target.offsetTop);→ 默认是 instant，必须写成window.scrollTo({ top: target.offsetTop, behavior: 'smooth' }); - 如果同时用了 JS 滚动 + CSS
scroll-behavior，且目标元素动态渲染（如 Vue/React 中），要确保元素已挂载、尺寸已计算完毕再触发滚动，否则offsetTop可能为 0
兼容性和降级处理要不要做
目前 scroll-behavior 在 Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+ 均支持，但 Safari 15.2–15.3 有 bug：启用后页面可能出现滚动卡顿或跳动；iOS Safari 15.4 之前基本不支持。
如果你的用户包含大量 iOS 14 或更早设备，不能只依赖 CSS 方案。稳妥做法是：
- 先加
html { scroll-behavior: smooth; }覆盖现代浏览器 - 用
@supports (scroll-behavior: smooth)包裹相关样式，避免干扰老浏览器解析 - 对不支持的环境，用轻量 JS fallback（如
scrollIntoView({ behavior: 'smooth' })或 requestAnimationFrame 手写缓动）
真正难搞的不是兼容性，而是混合使用 sticky header、intersection observer 和平滑滚动时，滚动终点计算被多次干扰——这种场景下，scroll-margin-top 和 getBoundingClientRect() 手动校准往往比依赖默认行为更可靠。
