✅ 正确写法是 html { scroll-behavior: smooth; }，必须作用于 html 元素；href 与 id 需严格匹配且合法；目标元素须已渲染；固定头部遮挡时用 scroll-margin-top 补偿；Safari 15.4+ 才稳定支持。
直接用 html { scroll-behavior: smooth; } 就能实现导航点击后的平滑滚动，但 90% 的失败不是代码写错，而是 CSS 作用对象错了、id 不合法，或目标元素还没渲染出来。
scroll-behavior 必须写在 html 元素上
这个属性只对主滚动容器生效，而现代浏览器的主滚动容器是 html，不是 body 或其他 wrapper。写在 body 上完全无效。
- ✅ 正确：
html { scroll-behavior: smooth; } - ❌ 无效：
body { scroll-behavior: smooth; }、* { scroll-behavior: smooth; }、.main { scroll-behavior: smooth; } - 检查方式：打开开发者工具 → 选中
html元素 → 在 computed 样式里确认scroll-behavior值为smooth，且未被!important覆盖（某些 UI 框架如 Ant Design 会强制设为auto !important）
href 和 id 必须严格匹配且存在
锚点跳转是静默行为，错一点就完全不滚动，也不报错。
-
href必须是#section-1这种格式，不能是section-1、/#section-1或?id=section-1 -
id值不能以数字开头（如id="1-section"在旧版 Safari 可能失效），不能含空格、中文、特殊符号（id="联系我们"或id="contact us"都会中断） - 目标元素必须在当前 DOM 中真实存在；Vue/React 动态渲染的内容，若点击时组件尚未挂载，
getElementById返回null，跳转即失效
固定头部遮挡时用 scroll-margin-top 补偿
别用 margin-top 或负 padding 挤开目标元素——这破坏布局，且不解决定位逻辑。
- 给目标元素加
scroll-margin-top: 64px;（值应等于固定头部高度，含 border/padding） - 支持
px、rem、vh等单位，例如：h2[id] { scroll-margin-top: 4rem; } - 该属性只在目标处于可滚动上下文内才生效；若目标在 Shadow DOM 或 iframe 中，需单独设置
Safari 和部分 WebView 的兼容性处理
scroll-behavior: smooth 在 Safari 15.4+ 才稳定支持，部分安卓 WebView 完全不识别该选项。
- 可加简单降级：检测是否支持
scrollBehavior，不支持时不做任何样式干预，由浏览器默认跳转 - 如需强一致性平滑效果，可改用 JS 方案：
element.scrollIntoView({ behavior: 'smooth' })，但要注意调用前校验元素是否存在 - 避免重复绑定事件：用
document.querySelectorAll('a[href^="#"]')获取链接时，要过滤掉外部链接（如href="#https://example.com"）
最易被忽略的是目标元素的可见性与渲染时机——哪怕 CSS 写对了，id 也拼对了，如果目标还在 v-if 或 ngIf 里没展开，或者 React useEffect 还没执行完，滚动就会静默失败。处理动态内容，得等元素真正挂载后再触发，而不是一点击就硬调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
