scroll-behavior: smooth 只对具有滚动容器的元素生效，需作用于 html 或带 overflow 的容器；js 滚动需显式传 behavior: 'smooth' 参数。
scroll-behavior: smooth 为什么没生效
直接加 scroll-behavior: smooth 却没滚动动画？大概率是作用对象错了。它只对**有滚动容器的元素**生效，不是全局开关。
- 必须写在
html或body上才影响整页锚点跳转（比如<a href="#section"></a>） - 如果想让某个
div内部滚动平滑，得给那个div加scroll-behavior: smooth，且该div得有溢出（overflow: auto或scroll） -
html元素上设了scroll-behavior，但body有 margin 或 height 冲突，也可能被浏览器忽略 —— 建议统一用html { scroll-behavior: smooth; }，并确保body { margin: 0; }
JavaScript 滚动到位置时 scroll-behavior 不起作用
scroll-behavior 只管 CSS 触发的滚动（如锚点、scrollIntoView() 默认行为），不干预 scrollTo() 或 scrollTop 这类 JS 直接赋值操作。
- 想用 JS 实现平滑滚动，得显式传参数：
element.scrollTo({ top: 100, behavior: 'smooth' }) -
scrollIntoView()同理：写成el.scrollIntoView({ behavior: 'smooth' })，不传配置就是默认“瞬间”滚动 - 旧版 Safari（behavior: 'smooth' 参数，会静默退化为立即滚动，无报错
兼容性与性能要注意什么
scroll-behavior 的 CSS 属性本身支持 Chrome 61+/Firefox 36+/Edge 79+，但 iOS Safari 直到 15.4 才支持 JS 的 behavior: 'smooth' 参数。
- 服务端渲染或首屏 SEO 场景下，CSS
scroll-behavior是安全的；JS 方案需判断'scrollBehavior' in document.documentElement.style再降级 - 频繁触发平滑滚动（比如监听
scroll节流不当）可能引起卡顿，尤其低端 Android 设备 —— 避免在touchmove或scroll中调用scrollIntoView - 使用
scroll-behavior: smooth后，某些浏览器会禁用原生滚动惯性（如 macOS 的弹性滚动），属于已知副作用，无法绕过
锚点跳转后 URL 带 # 却没滚动
常见于 Vue/React 单页应用：路由变化更新了 URL，但没触发真实滚动，scroll-behavior 自然不响应。
- 前端路由需手动调用
scrollTo()或scrollIntoView()，不能只靠 CSS - Vue Router v4 提供
scrollBehavior配置函数；React Router v6 推荐用useEffect+useLocation监听路径变化后滚动 - 若用
history.pushState()手动改地址，记得同步调用scrollTo()，否则页面不动，URL 白变了
实际用的时候，最常漏掉的是「给谁加」和「JS 是否要自己配 behavior」这两层。CSS 属性看着简单，但跨技术栈（HTML/CSS/JS/框架）时，每个环节都得对齐才真平滑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
