平滑滚动需在CSS中设置html { scroll-behavior: smooth }，非Tailwind类；锚点ID须严格匹配href；目标元素加scroll-margin-top防导航栏遮挡；Safari 15.4以下不支持该属性。
平滑页面滚动在 Tailwind 中不能靠 scroll-smooth 类实现——这个类根本不存在，浏览器完全不识别。
html { scroll-behavior: smooth } 是唯一生效方式
必须写在 html 元素上，且只能通过 CSS 声明，不是 Tailwind 工具类。Tailwind 不提供、也不计划支持该功能。
- ✅ 正确写法：在 CSS 文件中（推荐用
@layer base）加入：html { scroll-behavior: smooth; } - ❌ 错误写法：
body { scroll-behavior: smooth; }、.container { scroll-behavior: smooth; }、class="scroll-smooth" - ⚠️ 若页面用了
html { height: 100vh; overflow: hidden; }，html就不再是滚动容器，该声明彻底失效 - 检查是否生效：打开 DevTools → 选中
html元素 → Computed 面板搜索scroll-behavior，确认值为smooth且未被!important覆盖
href 和 id 必须逐字符严格匹配
90% 的“咔一下跳过去”问题，根源不在 CSS，而在 DOM 层面没对上。
-
href="#Contact"和id="contact"→ 不匹配（大小写敏感） -
href="#faq-section"和id="faq_section"→ 不匹配（连字符 vs 下划线） - 目标元素是
display: none、visibility: hidden，或 React/Vue 中尚未挂载 → 浏览器无法定位，offsetTop为 0 - 初始加载带 hash（如
page.html#contact）时，CSS 可能未就绪，首次跳转仍是硬跳
固定导航栏遮挡？用 scroll-margin-top 留白
这不是 JS 偏移计算的问题，而是锚点定位逻辑本身缺失留白空间。
- 给目标元素（如
）加：h2[id] { scroll-margin-top: 60px; } - 响应式建议：
scroll-margin-top: clamp(50px, 8vh, 80px);
- ⚠️ 别用
scroll-padding-top：它是作用于整个滚动视口的内边距，和锚点定位无关 - 该样式必须加在目标元素或其选择器上，加在
html或body上无效
JS 调用 scrollIntoView 时 behavior 必须显式传
即使已设 html { scroll-behavior: smooth; }，调用 scrollIntoView() 时仍需手动指定参数。
- ❌ 错误写法：
el.scrollIntoView()→ 默认是behavior: 'auto' - ✅ 正确写法：
el.scrollIntoView({ behavior: 'smooth', block: 'start' }) - Safari 15.4 以下版本不支持
scroll-behavior: smooth，会静默退化为瞬时跳转，不报错也不警告 - 若需兼容旧 Safari，得自己实现基于
window.scrollTo的动画逻辑
最容易被忽略的是 scroll-margin-top 的缺失和 Safari 版本兼容性——前者导致目标总卡在导航栏下面，后者让测试环境看起来正常，上线后部分用户却毫无动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
