scroll-behavior: smooth 须作用于 html 元素且页面内容高度超视口才生效；锚点需合法 id、避免重复或无效 name；JS 调用 scrollIntoView 必须显式指定 behavior: 'smooth'；慎用 transform/sticky 等可能干扰滚动的样式。
scroll-behavior: smooth 必须作用于根滚动容器
直接给 body 或 html 加 scroll-behavior: smooth 通常无效，因为多数浏览器把根滚动容器视为 document.documentElement（即 html 元素），但它的默认 overflow 是 visible，不触发滚动上下文。真正起作用的是让 html 元素成为可滚动容器——这需要显式设置 height: 100% 和 overflow: auto，或更稳妥地：只对 html 设置 scroll-behavior: smooth，同时确保页面内容足够高以产生滚动。
推荐写法：
html {
scroll-behavior: smooth;
}
不需要动 body，也不用加 height/overflow；只要页面自然高度超过视口，该声明就会生效。若仍不工作，检查是否被 JavaScript 的 scrollIntoView({ behavior: 'auto' }) 覆盖，或存在 overscroll-behavior 干扰。
锚点跳转时 href 必须指向有效 id，且不能带 hash 冲突
比如 <a href="#section2">跳转</a> 要求页面中存在 <section id="section2">。常见错误包括：
立即学习“前端免费学习笔记（深入）”；
-
id值含空格、大写字母或特殊符号（如id="My Section"），应改为id="my-section" - 多个元素用了相同
id，浏览器只匹配第一个，平滑滚动可能停在错误位置 - 使用了
name属性代替id（<a name="old"></a>已废弃，scroll-behavior不识别） - 跳转前目标元素尚未渲染（如异步加载的组件），此时点击无反应或跳转到顶部
JavaScript 调用 scrollIntoView 需显式指定 behavior
即使全局设置了 scroll-behavior: smooth，JS 调用 element.scrollIntoView() 默认仍是 behavior: 'auto'，必须手动传参：
document.getElementById('target').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
注意：block 和 inline 参数影响对齐方式，默认 block: 'center' 可能导致目标被标题栏遮挡，生产环境建议统一设为 'start' 或根据固定头部高度做 offset。
另外，Safari 15.4+ 才完整支持 scrollIntoView({ behavior: 'smooth' })，旧版 Safari 会退化为立即滚动，无报错也无提示。
与 position: sticky 或 transform 元素共存时可能失效
如果目标元素或其某个祖先设置了 transform、perspective、filter 或 will-change，会创建新的层叠上下文和局部坐标系，导致 scroll-behavior: smooth 计算偏移出错，表现为滚动过快、卡顿甚至跳转失败。
排查方法：
- 临时移除父级的
transform: translateY(0)类或内联样式 - 检查是否有
position: sticky元素包裹目标，它本身不阻断 smooth，但若 sticky 容器高度变化频繁（如动态展开菜单），可能触发 layout thrashing，间接干扰滚动动画帧率 - 避免在滚动过程中高频修改
scrollTop或监听scroll事件并调用preventDefault()
真正稳定的行为，依赖于目标元素处于标准文档流、无非必要合成层干预。复杂布局下，不如用 requestAnimationFrame + element.scrollTop 手动实现可控性更强的滚动。
