直接加 html { scroll-behavior: smooth; } 就能生效，但绝大多数“没反应”问题都出在作用对象错误、目标不可见或被覆盖上；必须写在 html 上，body 或 div 无效，且需确保目标 id 合法、元素可见、无 overflow/transform 干扰，ios safari 需 js fallback。
直接加 html { scroll-behavior: smooth; } 就能生效，但绝大多数“没反应”问题都出在作用对象错误、目标不可见或被覆盖上，不是 CSS 写错了。
scroll-behavior 必须写在 html 上，body 或 div 都无效
浏览器的根滚动容器是 html 元素，scroll-behavior 只对实际发生滚动的容器生效。写在 body 上在 Safari 和部分旧版 Chrome 中完全不触发；写在某个 div 上只影响该容器内部的局部滚动（比如一个 overflow-y: auto 的区域），对页面级锚点跳转无作用。
-
html { scroll-behavior: smooth; }是唯一可靠写法，不要加!important，也不要嵌套在媒体查询里 - 检查开发者工具的 “Computed” 面板，确认
scroll-behavior确实计算为smooth，而非被第三方样式（如 Ant Design 或 modern-normalize）用auto !important覆盖 - 避免使用
* { scroll-behavior: auto !important; }这类通配符重置，它会静默干掉你的设置
锚点跳转仍“啪”一下瞬移？先查这三处断点
即使 CSS 正确，scroll-behavior 也只在链路完整时才工作。失效几乎都来自目标端异常，而非滚动逻辑本身。
-
href和目标元素的id必须严格一致：大小写、连字符、下划线都不能错，#faq不匹配id="FAQ"，#contact_us不匹配id="contact-us" - 目标元素不能脱离文档流：
position: absolute、transform、display: none、visibility: hidden或父级overflow: hidden都会让浏览器无法定位其真实位置 - 目标必须在
html的默认滚动上下文中：如果页面用height: 100vh+overflow: hidden锁死html，或者把内容包在overflow: auto的局部容器里，html上的scroll-behavior就管不到它
固定导航栏遮住锚点？用 scroll-margin-top，别算 offsetTop
浏览器默认把锚点元素顶部对齐视口顶部，position: fixed 或 sticky 导航栏会直接盖住内容。这不是滚动不准，而是定位逻辑没考虑头部高度。
- 给目标元素加
scroll-margin-top：例如h2[id] { scroll-margin-top: 64px; }，值建议与导航栏实际高度一致 - 响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px);，避免小屏下留白过大或大屏下遮挡 - 不要给
html或body加scroll-padding-top——它控制的是整个视口的内边距，和锚点定位无关，容易误用
iOS Safari 上基本别指望它自动工作
截至 2026 年 6 月，html { scroll-behavior: smooth; } 在 iOS Safari 上支持极差：15.4 之前完全不支持；15.4–16.0 支持但常卡顿、跳帧甚至静默失败；iOS 16+ 仅对 element.scrollIntoView({ behavior: 'smooth' }) 有效，html 上的声明基本被忽略。
- 若需兼容 iOS，必须降级为监听
hashchange事件 + 手动调用element.scrollIntoView({ behavior: 'smooth' }) - 系统“减少动画”设置也会禁用
scroll-behavior: smooth，这是用户级限制，代码无法绕过 - 真正难调的不是 CSS 写法，而是当锚点目标由框架动态渲染（如 React 的条件渲染或 Vue 的
v-if）时，:target伪类可能根本不会触发——hash 存在时节点还没挂载，就永远“看不见”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
