scroll-behavior: smooth 必须作用于 html 元素才生效，因页面级滚动容器是 html 而非 body；写在 body 上无效，且需确保 html 未被重置样式破坏默认滚动上下文。
scroll-behavior: smooth 必须写在 html 标签上才生效
很多人在 body 上加 scroll-behavior: smooth，结果毫无反应——CSS 规范明确要求该属性只对「滚动容器」起作用，而页面级滚动的容器是 html 元素，不是 body。
常见错误现象：body { scroll-behavior: smooth; } 完全无效；用 JavaScript 调用 element.scrollIntoView() 仍为瞬移。
- 正确写法：
html { scroll-behavior: smooth; } - 如果用了 CSS 重置（如
* { margin: 0; }），确保没意外把html的height或overflow改成非默认值 - 某些框架（如 Next.js）生成的 DOM 可能包裹了额外容器，需检查实际滚动根元素是否仍是
html
锚点跳转失效？检查 id 和 href 是否严格匹配
scroll-behavior: smooth 只影响原生锚点导航（a[href="#xxx"] → element[id="xxx"]）和 scrollIntoView()，不接管自定义 JS 滚动逻辑。
使用场景：点击菜单跳转到页面某区块、目录快速定位。
立即学习“前端免费学习笔记（深入）”；
-
href中的#后必须与目标元素id值**完全一致**（区分大小写、不可含空格或特殊字符） - 避免用
name属性代替id：HTML5 已不推荐，且部分浏览器不识别 - 动态渲染的内容（如 React/Vue 组件）要确保
id在挂载后真实存在于 DOM 中，否则跳转会失败或回退到顶部
Firefox 不支持？其实是兼容性没查全
该属性在 Chrome 61+、Edge 79+、Safari 15.4+、Firefox 68+ 均已支持。所谓“Firefox 不行”，通常是遇到了下面两种情况：
- 用了旧版 Firefox（
- 开启了「辅助功能」中的「减少动画」选项（macOS 系统偏好设置 / Windows 设置），此时所有
scroll-behavior: smooth会被强制禁用——这是浏览器主动尊重用户偏好，不是 bug - 若需绕过系统设置（不推荐），只能用 JS 模拟平滑滚动，但会丢失原生滚动的性能和惯性
为什么加了还是卡顿？留意滚动目标是否被 transform 或 overflow 截断
当目标元素被包裹在 transform、filter 或设置了 overflow: hidden/scroll 的父容器中时，scroll-behavior: smooth 可能无法将视图精准滚动到该元素位置，表现为“滚过头”或“停在半路”。
性能影响：这种嵌套滚动会让浏览器难以确定滚动上下文，触发额外布局计算。
- 优先让锚点元素处于标准文档流中，避免被
position: absolute或transform脱离 - 检查父级是否有
overflow: hidden—— 如果必须存在，考虑改用scrollIntoView({ behavior: 'smooth', block: 'start' })并指定scrollMarginTop补偿偏移 -
scroll-margin-top是关键补丁：给目标元素设scroll-margin-top: 80px，可让它滚动后距离视口顶部留出固定间距（比如避开 fixed header）
事情说清了就结束。真正麻烦的不是加那行 CSS，而是滚动链路上任何一个环节脱离标准流或被用户系统策略拦截。
