scroll-behavior: smooth 必须加在 html 元素上才对页面级锚点跳转生效，body 上基本无效；仅作用于可滚动容器，如需局部平滑滚动则加在对应 overflow 容器上。
scroll-behavior: smooth 该加在哪个元素上？
它必须作用于滚动容器，通常是 html 或 body 元素。加在子元素（比如某个 div）上只对该元素自身的滚动生效，而页面级锚点跳转（#section1）依赖的是根滚动容器。
- 大多数场景下，直接给
html设置最稳妥：html { scroll-behavior: smooth; } - 如果用了自定义滚动容器（如
overflow-y: auto的div），才需要单独给那个div加 - 不要只写
body { scroll-behavior: smooth; }—— 浏览器实际滚动的是html，body上的声明常被忽略
为什么加了 scroll-behavior 却没效果？
常见原因不是语法错，而是被覆盖或不满足触发条件：
-
scroll-behavior不影响 JavaScript 调用的scrollTo()或scrollIntoView()，除非显式传入{ behavior: 'smooth' } - 锚点链接必须是同源、有效的
id匹配（比如<a href="#about"></a>对应<section id="about"></section>），不能是 class 或 data 属性 - 使用了
position: fixed或transform的父容器可能创建新的层叠上下文或滚动上下文，干扰根滚动行为 - 某些 CSS 重置库（如 Normalize.css）或框架（如 Tailwind 默认配置）会把
html的height设为100%，导致其无法滚动——检查 computed styles 中html是否有实际滚动高度
JavaScript 中如何配合使用 scroll-behavior？
scroll-behavior: smooth 只管 CSS 触发的滚动（如点击锚点），JS 滚动仍需手动指定行为：
-
element.scrollIntoView({ behavior: 'smooth' })—— 推荐，兼容性好（Chrome 61+、Firefox 68+、Safari 15.4+） -
window.scrollTo({ top: 100, behavior: 'smooth' })—— 注意 Safari 旧版本对scrollTo的behavior支持较晚 - 不要混用：如果已设
html { scroll-behavior: smooth; }，再对同一滚动调用 JS 平滑方法，不会叠加或出错，但属于冗余
兼容性和 fallback 怎么处理？
scroll-behavior 在现代浏览器中支持良好（Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+），但 iOS Safari 15.2–15.3 有 bug：设在 html 上无效，必须降级到 body。
- 安全写法（带降级）：
html { scroll-behavior: smooth; } body { scroll-behavior: smooth; } - 不必 polyfill：纯 CSS 行为，不支持时自动退回到原生跳转，无报错
- 真正容易被忽略的是「滚动目标不可见时的行为」：比如目标元素被
display: none或visibility: hidden，scrollIntoView会静默失败，且不抛错——务必确保目标在调用前已渲染并可见
平滑滚动本身很简单，麻烦往往出在滚动容器判断错误、目标元素状态异常，或者误以为它能接管所有滚动场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
