scroll-behavior是css属性，需在html或body上设置smooth才生效，仅影响原生锚点跳转和scrollintoview()，不控制js滚动或键盘滚动，且受容器层级和浏览器兼容性限制。
scroll-behavior 是 CSS 属性，不是 HTML 属性，不能写在 HTML 标签里（比如 是无效的）。
怎么在页面中启用平滑滚动
必须通过 CSS 设置 scroll-behavior，且作用对象是「可滚动的容器」。最常见的是给 html 或 body 元素设为 smooth：
html {
scroll-behavior: smooth;
}
注意：只设 body 通常无效，因为实际滚动容器是 html（在标准模式下）。部分浏览器（如旧版 Safari）对 html 元素支持不稳定，可加兜底：
-
html和body都设scroll-behavior: smooth - 确保没有
html { overflow: hidden }这类覆盖样式 - 该属性不影响 JavaScript 调用的
scrollTo()，除非显式传{ behavior: 'smooth' }
哪些滚动会触发 scroll-behavior
仅对「原生锚点跳转」和「scrollIntoView()」生效（前提是没被 JS 阻止默认行为）：
-
@#@#@#@#@#@#@#@#@#@0→ 点击后平滑滚动 -
element.scrollIntoView()→ 默认行为是auto，加{ behavior: 'smooth' }才强制平滑 -
window.scrollTo()、element.scrollTo()→ 必须手动传{ behavior: 'smooth' }，scroll-behavior: smooth对它们无影响 - 键盘方向键、空格键滚动 → 不受该 CSS 控制
兼容性和常见失效原因
Chrome 61+、Firefox 36+、Edge 79+ 支持；Safari 直到 15.4 才支持 html 上的 scroll-behavior，且 iOS Safari 15.4–16.3 有 bug（设了也不生效）。
常见失效场景：
- 页面用了
position: fixed的全屏遮罩层，导致html失去滚动权，实际滚动容器变成遮罩层内部 —— 此时得给那个容器设scroll-behavior - 设置了
overflow: hidden或overflow: auto在某个父容器上，而目标元素在它内部 —— 平滑滚动只作用于该父容器，不是整个页面 - 使用了第三方库（如 ScrollMagic、locomotive-scroll）接管滚动 —— 它们会禁用原生滚动行为，CSS 属性自然无效
真正要控制滚动体验，得区分清楚：CSS scroll-behavior 只管“谁滚”和“怎么滚”的声明式规则，而具体“什么时候滚”“滚到哪”仍由 HTML 锚点或 JS 方法决定。很多人卡在设了 CSS 却没看到效果，八成是滚动容器判断错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
