Tailwind CSS 无 scroll-smooth 类，生效唯一方式是 html { scroll-behavior: smooth; }；必须作用于 html 元素，body 或 div 上无效；需严格匹配 href 与 id、设置 scroll-margin-top 避免导航栏遮挡，并显式传 behavior: 'smooth' 给 scrollIntoView()。
Tailwind CSS 本身没有 scroll-smooth 类，直接写 class="scroll-smooth" 完全无效——浏览器根本不识别这个类名。真正起效的只有一条原生 CSS 规则：html { scroll-behavior: smooth; }。
必须加在 html 元素上，不是 body 或 div
锚点跳转（如 a[href="#about"]）的平滑滚动，依赖的是**根滚动容器**的行为控制。绝大多数浏览器（包括 Safari 15.4+）只响应 html 元素上的 scroll-behavior: smooth；body 上设置基本被忽略，div 上加则只影响该容器内部的 scrollIntoView()，和页面级跳转无关。
- ✅ 正确做法：在 CSS 文件中用
@layer base写入：html { scroll-behavior: smooth; } - ❌ 错误写法：
body { scroll-behavior: smooth; }、.container { scroll-behavior: smooth; } - ⚠️ 注意：若页面用了
html { height: 100vh; overflow: hidden; }，html就不再是滚动容器，该声明彻底失效
href 和 id 必须逐字符严格匹配
90% 的“咔一下跳过去”问题，不是 CSS 没生效，而是 DOM 层面没对上。浏览器对 ID 匹配大小写、连字符、空格全部敏感。
-
href="#Contact"和id="contact"→ 不匹配 -
href="#faq-section"和id="faq_section"→ 不匹配 - 目标元素是
display: none、visibility: hidden，或 React/Vue 中尚未挂载 → 浏览器无法定位，offsetTop为 0 - 初始加载带 hash（如
page.html#contact）时，CSS 可能未就绪，首次跳转仍是硬跳
固定导航栏遮挡目标？用 scroll-margin-top 留白
滚动后内容被顶部 position: fixed 导航栏盖住，不是 JS 偏移计算的问题，而是 CSS 锚点定位逻辑缺失。解决方案是给目标元素自身加留白：
立即学习“前端免费学习笔记（深入）”；
- 在目标元素（如
h2[id]）上设置：h2[id] { scroll-margin-top: 60px; } - 值建议等于导航栏高度；响应式可用
scroll-margin-top: clamp(50px, 8vh, 80px);
- ⚠️ 别误用
scroll-padding-top：它是作用于整个滚动视口的内边距，和锚点定位无关 - 该样式必须加在目标元素或其选择器上，加在
html或body上无效
JavaScript 调用 scrollIntoView 时 behavior 必须显式传
即使已设 html { scroll-behavior: smooth; }，调用 scrollIntoView() 时仍需手动指定参数。浏览器默认是 behavior: 'auto'，不继承全局声明。
- ❌ 错误：
el.scrollIntoView() - ✅ 正确：
el.scrollIntoView({ behavior: 'smooth', block: 'start' }) - Safari 15.4 以下版本不支持
scroll-behavior: smooth，会静默退化为瞬时跳转——如需兼容，得自己实现基于window.scrollTo的动画逻辑 - 检查是否生效最快方式：DevTools → 选中
html→ Computed → 搜scroll-behavior，确认值为smooth且未被!important覆盖
最容易被忽略的是 scroll-margin-top 和 Safari 版本兼容性：前者不设就卡在导航栏下面，后者不查版本就以为“写了就一定有效”。
