必须写在html元素上：html { scroll-behavior: smooth; }，写在body或容器上无效；仅对原生锚点跳转生效，JS调用需显式传{ behavior: 'smooth' }，且旧版Safari（iOS 15.3及更早）不支持。
html { scroll-behavior: smooth } 必须写在 html 元素上
这行 CSS 是启用原生平滑滚动的开关，但只对 html 元素生效，写在 body 上完全无效。很多项目加了却没反应，根源就在这里。
常见错误写法：body { scroll-behavior: smooth; } 或 .container { scroll-behavior: smooth; }——这些都不会触发任何平滑行为。
正确写法只有一行，且必须放在全局样式中（如 <style></style> 块或 CSS 文件顶部）：
html { scroll-behavior: smooth; }注意：部分旧版 Safari（iOS 15.3 及更早）即使写了也无效果，这是浏览器限制，不是代码问题。
立即学习“前端免费学习笔记（深入）”；
仅靠 CSS 不足以实现完整平滑滚动逻辑
scroll-behavior: smooth 只接管原生锚点跳转（即点击 <a href="#section"></a> 这类链接），它不处理以下情况：
- JavaScript 主动调用的
window.scrollTo()或element.scrollIntoView()，除非同时显式传入{ behavior: 'smooth' } - 页面顶部跳转（
href="#"或href="#top"）时被 fixed 导航栏遮挡的问题 - 需要动态计算偏移量（如减去导航栏高度）的场景
- 点击后 URL hash 变化引发的默认跳转闪动
也就是说：CSS 开关开了，JS 调用还得自己写对，否则照样“瞬移”。
为什么点了导航链接还是生硬跳转？
典型现象是：菜单项带 href="#about"，点击后页面突然闪到目标位置，没有动画。原因往往不是 CSS 没加，而是：
- 没调用
event.preventDefault()，导致先执行浏览器默认锚点跳转（URL 变、页面闪），再执行 JS 滚动（如果有的话） - Bootstrap 的
data-bs-spy="scroll"被误认为能控制滚动——它只监听位置、高亮导航项，不干预滚动动作本身 - 目标元素 ID 不存在、含非法字符（如空格、中文）、或 DOM 尚未渲染完成
- 用了 jQuery 的
$('html, body').animate({ scrollTop: ... })，在现代浏览器里反而可能冲突或降级失败
最简验证方式：临时删掉所有 JS，只留 html { scroll-behavior: smooth; } 和标准锚点链接，看是否生效。若仍无效，优先查 ID 是否合法、元素是否存在。
fixed-top 导航栏下内容被遮挡怎么办
CSS 级别的 scroll-behavior: smooth 无法补偿固定头部偏移，这是它的硬限制。一旦用了 fixed-top，必须用 JS 手动调整：
- 对“回到顶部”，用
window.scrollTo({ top: 0, behavior: 'smooth' })，而不是scrollIntoView - 对跳转到某元素，别直接
el.scrollIntoView({ behavior: 'smooth' })，改用：window.scrollTo({<br> top: el.offsetTop - 80,<br> behavior: 'smooth'<br>});其中80是导航栏高度（单位 px），需按实际调整 - 若导航栏高度响应式变化（如移动端变矮），建议用
getBoundingClientRect().top动态读取，而非写死数值
这个偏移补偿步骤常被忽略，结果就是用户滚到了，但标题被 navbar 盖住——看起来像“滚动失败”，其实是位置算错了。
