scroll-behavior: smooth 必须写在 html 元素上，因 css 规范限定其仅对根滚动容器生效；body 滚动实为 html 滚动，加在 body 或其他元素无效，且不可被后代选择器或 !important 覆盖。
scroll-behavior: smooth 必须写在 html 上，不是 body
很多人把 scroll-behavior: smooth 加在 body 或某个容器上，结果无效。CSS 规范明确要求该属性只对根滚动容器（即 html 元素）生效，body 的滚动本质上是 html 在滚动。
SCSS 中推荐统一写在基础重置层：
html {
scroll-behavior: smooth;
}
注意：这个声明不能被后代选择器覆盖（比如 .page html），也不能用 !important 强行加在其他元素上——它不生效。
锚点跳转失效的三个常见原因
即使启用了 scroll-behavior: smooth，点击 <a href="#section"></a> 仍可能无反应或不平滑，典型原因有：
-
#section对应的元素缺失id，或拼写大小写不一致（HTML id 是大小写敏感的） - 目标元素被
display: none、visibility: hidden或opacity: 0遮蔽，浏览器无法计算其位置 - 页面存在 JavaScript 拦截了默认跳转（如
e.preventDefault()后没手动触发滚动）
调试时可临时在控制台执行 document.querySelector('#section') 确认元素是否存在且可见。
JavaScript 滚动控制要避开 behavior: 'smooth' 的兼容性陷阱
用 element.scrollIntoView({ behavior: 'smooth' }) 或 window.scrollTo() 时，部分旧版 Safari（≤15.4）和 IE 完全不支持 behavior: 'smooth'，会静默降级为瞬间滚动。
稳妥做法是检测支持性后再启用：
if ('scrollBehavior' in document.documentElement.style) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView();
}
不要依赖 try/catch，因为不支持时不会报错，只是忽略该字段。
SCSS 全局配置建议：用变量控制是否启用平滑滚动
项目上线后可能需临时关闭平滑滚动（比如性能敏感页、动画冲突场景），硬编码 scroll-behavior: smooth 不利于快速切换。SCSS 中可用布尔变量统一管控：
$enable-smooth-scroll: true;
html {
@if $enable-smooth-scroll {
scroll-behavior: smooth;
}
}
这样只需改一个变量，就能全局开关；配合构建工具（如 Webpack DefinePlugin），还能按环境自动注入不同值。别忘了，这个变量也该同步用于 JS 检测逻辑里，保持行为一致。
真正容易被忽略的是：移动端 WebView（尤其微信内置浏览器）对 scroll-behavior 支持不稳定，有时需要额外加 touch-action: manipulation 或监听 touchstart 来避免延迟响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
