class="scroll-smooth"无效，因Tailwind官方未提供该类，浏览器不识别；必须用html{scroll-behavior:smooth}并配合目标元素的scroll-margin-top解决导航栏遮挡。
不能靠 class="scroll-smooth"，必须用原生 CSS 的 scroll-behavior: smooth 作用于 html 元素，并配合 scroll-margin-top 修正固定导航栏遮挡问题。
为什么 class="scroll-smooth" 完全无效
Tailwind CSS 官方从未提供 scroll-smooth 这个类——浏览器根本不识别它。你写 <a href="#faq">FAQ</a> 点击后还是“咔”一下跳过去，不是配置漏了，是根本没这回事。
- 所有生效的平滑滚动都依赖原生 CSS 属性
scroll-behavior: smooth - 即使你在
tailwind.config.js里手动extend出一个scroll-smooth，也必须让它最终编译为scroll-behavior: smooth才起作用 - 加在
<div>或<body>上大概率失效，尤其 Safari 对body支持极差
scroll-behavior: smooth 必须加在 html 上
页面级锚点跳转（href="#section"）的滚动容器是 <html>，不是 <body>，也不是某个 <div class="content">。
- ✅ 正确写法：在 CSS 文件中加
html { scroll-behavior: smooth; }，推荐用@layer base声明 - ❌ 错误写法：
body { scroll-behavior: smooth; }—— 多数浏览器静默忽略，Safari 尤其不稳定 - ⚠️ 如果页面用了
height: 100vh; overflow: hidden;，<html>实际不可滚动，该声明直接失效
固定导航栏遮挡目标元素？用 scroll-margin-top
滚动后 <h2 id="faq"> 被顶部 position: fixed 导航栏盖住，不是 JS 计算错了，是浏览器默认把目标元素顶部对齐视口顶部。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确解法：给目标元素自身加
scroll-margin-top，比如<h2 id="faq" class="-scroll-mt-20">（Tailwind 对应工具类） - ❌ 错误做法：把
-scroll-mt-20加在<section>上，而id="faq"在内部<h2>—— 浏览器只认带id的那个元素 - 值建议匹配导航栏高度，响应式可用
scroll-mt-[clamp(50px,8vh,80px)]，但注意 Tailwind 默认不支持clamp()，需自定义或用插件
动态渲染（React/Vue）下锚点失效怎么办
路由加载带 #contact，但目标区块由 v-if 或 useState 控制，初始未挂载，:target 无法匹配，scroll-behavior 再准也没用。
- 必须等 DOM 渲染完成后再调用
element.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 即使全局设了
html { scroll-behavior: smooth; }，JS 调用时仍需显式传{ behavior: 'smooth' }，否则默认是'auto' - ID 必须合法：不能以数字开头（
id="1section"非法），不能含空格或特殊字符（id="my section"会解析失败）
真正卡住人的从来不是怎么写 CSS，而是 ID 是否已挂载、是否可见、是否拼写一致，以及 scroll-margin-top 是否真的落在了带 id 的那个元素上。
