scroll-behavior: smooth 未生效最常见原因是未作用于实际滚动容器，而误设在 html 或 body 上；其次不支持内联样式，且旧版 Safari 不兼容。
scroll-behavior: smooth 为什么没生效
最常见的情况是：只在 html 或 body 上写了 scroll-behavior: smooth，但父容器有溢出滚动（比如设置了 overflow: auto），而子元素才是实际滚动体——此时必须把 scroll-behavior 加在那个**真正发生滚动的容器**上，不是根元素。
另一个易忽略点：该属性不支持内联样式，只能通过 CSS 规则设置；且 Safari 旧版本（scroll-behavior 的支持有限，尤其在 body 上可能被忽略。
- 检查滚动容器是否是
html、body，还是某个div（如带overflow-y: scroll的侧边栏） - 确保没有 JavaScript 调用
element.scrollIntoView({ behavior: 'auto' })覆盖了 CSS 行为 - 若需兼容 Safari scrollIntoView({ behavior: 'smooth' }) + 手动绑定锚点点击
锚点跳转时页面没滚动到目标位置
这通常不是 scroll-behavior 的问题，而是锚点本身不可滚动或未正确关联。CSS 平滑滚动依赖标准的锚点行为（即 <a href="#section1"></a> → <section id="section1"></section>），但以下情况会中断流程：
- 目标元素
id值含空格、特殊字符（如id="my section"），浏览器无法解析为有效 fragment - 目标元素被
display: none或visibility: hidden隐藏，即使存在也无法定位 - 目标元素位于
position: fixed容器内，或父级有transform、filter等创建新层叠上下文，导致 offset 计算偏移 - 页面加载后动态插入锚点元素，但浏览器已完成初始 fragment 寻址（此时需手动调用
element.scrollIntoView()）
使用 scroll-behavior 和原生 anchor 的最小可行配置
不需要 JS，纯 CSS + HTML 就能跑通。关键就两步：
立即学习“前端免费学习笔记（深入）”；
- 给滚动容器加
scroll-behavior: smooth（通常是html，但确认它是滚动体） - 确保所有锚点链接和目标满足规范：
<a href="#faq">FAQ</a>对应<div id="faq"></div>
示例：
html {
scroll-behavior: smooth;
}
注意：不要写成 body { scroll-behavior: smooth; }，因为大多数浏览器中 body 不是滚动容器，html 才是。
scroll-behavior 不支持自定义缓动曲线
scroll-behavior: smooth 固定使用浏览器内置的缓动函数（类似 cubic-bezier(0.2, 0.6, 0.4, 1)），无法像 JS 的 scrollTo() 那样传入 ease-in-out 或自定义贝塞尔值。
如果设计要求严格控制滚动节奏（比如和动画帧同步、或匹配品牌动效规范），就必须放弃 CSS 方案，改用 JS：
- 监听
a[href^="#"]点击 - 阻止默认行为
- 用
document.querySelector(href).scrollIntoView({ behavior: 'smooth', block: 'start' })
这时候才能真正控制 behavior 和 inline/block 对齐方式，也方便加 loading 状态或错误降级。
