仅靠 :target 无法实现平滑滚动，必须配合 html { scroll-behavior: smooth; }；该规则写在 body 或其他元素上无效，因浏览器根滚动容器是 html，且受 iOS Safari 版本、系统“减少动画”偏好及第三方 CSS 重置影响。
直接结论：仅靠 :target 无法实现平滑滚动，它只负责样式激活；必须配合 html { scroll-behavior: smooth; } 才能生效，且该 CSS 规则写在 body 或其他元素上完全无效。
为什么点了锚点链接还是“瞬移”，不是平滑滚动？
根本问题不在 JS 或 HTML，而在 CSS 作用对象错误：
-
scroll-behavior: smooth必须声明在html元素上——这是浏览器滚动容器的根节点，body不是 - 旧版 Safari（≤15.3）压根不支持该属性；15.4–16.0 支持但需同时加
html, body { scroll-behavior: smooth; }才稳定 - 如果页面用了
height: 100vh; overflow: hidden包裹路由容器，html实际不可滚动，属性自然不触发 - 第三方 CSS 框架（如 Ant Design、modern-normalize）可能用通配符重置了该属性：
* { scroll-behavior: auto !important; }会直接覆盖你的设置
:target 样式没反应？先确认这三件事
:target 是纯状态匹配，不触发 JS、不修改 DOM，失效几乎全是基础链路断了：
- ID 和 URL 片段必须**严格一致**：大小写、连字符（
-）、下划线（_）都不能差，#faq-2只匹配id="faq-2"，不匹配id="FAQ-2"或id="faq_2" - 目标元素必须已挂载在 DOM 中——React/Vue 里若用
useEffect异步插入<div id="section2">，而用户点击时 DOM 还没渲染，:target就永远不匹配 -
:target只认id，class、name、data-id全无效；ID 含点号（.）或冒号（:）会导致 CSS 解析失败，实际应避开，改用id="user-profile"
如何让 :target 配合平滑滚动做出真正可用的视觉反馈？
关键在于：过渡动画必须写在基础选择器里，不能只依赖 :target 单独声明：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
section:target { opacity: 1; transition: opacity 0.3s; }→transition没提前定义，不会触发动画 - 正确写法：
section { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; } section:target { opacity: 1; transform: translateY(0); } - 避免用
display: none切换显示，它会触发回流、无法过渡、布局抖动；改用visibility: hidden; position: absolute;+:target恢复 - 固定头部遮挡目标？别手动算偏移量，给目标加
scroll-margin-top: 60px，浏览器会自动把滚动终点上移
最易被忽略的一点：iOS Safari 的「减少动画」系统偏好会静默禁用 scroll-behavior: smooth，且不报错、不降级——这意味着你在开发机上看到的效果，在部分真实用户设备上就是“瞬移”。
