scroll-behavior: smooth 无效的主因是未作用于 html 根元素、目标元素不可见或系统禁用动画；需确保 html 上声明、id 合法、元素可见且父级无干扰 CSS，Safari 尤其敏感。
直接加 html { scroll-behavior: smooth; } 就能启用全局锚点平滑跳转，但必须写在 html 元素上，写错位置或目标元素不可见时，点击仍会“闪跳”。
为什么写了 scroll-behavior: smooth 还是硬跳？
最常见原因是样式没作用到正确元素——它只对根滚动容器（即 html）生效，body 上写完全无效。Safari 和旧版 Edge 尤其敏感。
- 检查 DevTools 中
html元素的 computed 样式，确认scroll-behavior确实为smooth，而不是被重置样式或!important覆盖 - 目标元素必须有合法
id（不能是class或name），且不能是display: none、visibility: hidden或未挂载状态 - 父级若含
transform、perspective或filter，会创建新层叠上下文，Safari 会静默降级为非平滑滚动 - 系统开启「减少动画」偏好（macOS/Windows 设置）时，该属性会被浏览器强制禁用，无法 polyfill 强行恢复
scrollIntoView({ behavior: 'smooth' }) 怎么安全调用？
适用于动态触发场景（如按钮点击、表单校验后跳转），但不检查元素存在性就会静默失败，控制台也不报错。
- 务必先判断元素是否存在：
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); -
block推荐显式设为'start'，避免不同浏览器默认值差异；若需避开固定头部，优先用 CSSscroll-margin-top: 80px，而非 JS 手动减去偏移 - 在 Vue/React 等框架中，确保调用时机在元素已渲染且尺寸可计算之后（比如
nextTick或useEffect里） - 不要在
touchmove事件中频繁调用，会中断手势、引发卡顿甚至主线程阻塞
window.scrollTo() 和局部滚动容器怎么配平滑？
scroll-behavior: smooth 对 window.scrollTo(0, y) 这类数字参数调用无效，必须改用对象参数形式；而局部滚动容器（如 overflow: auto 的 div）需要自己算偏移。
立即学习“前端免费学习笔记（深入）”；
- 全局滚动：改用
window.scrollTo({ top: 200, behavior: 'smooth' })，旧写法不触发动画 - 局部容器：不能直接
el.scrollIntoView()，得对容器调用container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: 'smooth' }) - 更健壮的偏移计算应基于
getBoundingClientRect()差值，尤其当容器有padding、border或transform时 - 注意：平滑滚动会阻塞后续同步脚本执行，比如紧接着读
getBoundingClientRect()可能拿到滚动前的位置，需监听scrollend或用setTimeout(..., 0)延迟
真正容易被忽略的是：平滑滚动不是“让页面变可滚动”，而是修饰已有滚动行为。如果内容高度不足一屏、或局部容器没设 overflow: auto，加了 scroll-behavior: smooth 也毫无效果。
