Tailwind 的 -scroll-mt-* 工具类需直接作用于带 id 的锚点元素（如 ），而非其父容器，否则滚动定位时无法生效。

tailwind 的 `-scroll-mt-*` 工具类需直接作用于带 `id` 的锚点元素（如 `

`），而非其父容器，否则滚动定位时无法生效。

在单页应用或长页面中，使用锚点链接（如 href="#testimonials"）跳转时，浏览器默认会将目标元素顶部紧贴视口顶端，常被固定导航栏遮挡。Tailwind 提供的 -scroll-mt-* 类（对应 CSS scroll-margin-top）正是为解决此问题而设计——它为元素定义“滚动快照区域”的上边距，使浏览器在滚动定位时自动预留指定空间。

但关键在于：该类必须直接添加到具有 id 的目标元素上，而非包裹它的

或其他父容器。你当前的代码将 -scroll-mt-20 应用于

，而 id="testimonials" 实际位于其内部的

标签上。由于浏览器滚动时锚点定位的是 #testimonials 元素本身，只有该元素设置了 scroll-margin-top，才能触发偏移计算。

✅ 正确写法如下：

JS带缩略图平滑滚动相册特效

JS带缩略图平滑滚动相册特效，带左右按钮，多图，左右平滑滚动，效果流畅。

下载

<section class="mt-24 text-4xl lg:text-5xl font-bold space-y-24"><h2 id="testimonials" class="font-bold -scroll-mt-20">Testimonials</h2>
  <!-- 后续 testimonial 内容保持不变 -->
  <figure class="px-14"><blockquote class="bg-slate-800 dark:bg-slate-800 p-8 rounded-2xl">
      <p class="text-2xl italic">
        <q>Manga<span class="text-indigo-300">Verse</span> is a manga lover's dream come true!</q>
      </p>
    </blockquote>
    <figcaption class="text-xl italic font-medium mt-6">— Clark Keneth</figcaption></figure><!-- 其他 testimonials... --></section>

⚠️ 注意事项：

• 确保页面已启用 scroll-smooth（你已在 上正确设置 class="scroll-smooth"），否则滚动无动画效果；
• -scroll-mt-* 值建议根据导航栏高度设定（如 -scroll-mt-16 ≈ 4rem，适配常见固定头部）；
• 该属性仅在元素参与滚动定位（即作为锚点被跳转）时生效，对普通布局无影响；
• 若仍无效，请检查是否启用了 scroll-behavior: smooth 的全局样式冲突，或确认 Tailwind 版本 ≥ v3.3（scroll-mt 系列工具类自此版本起正式支持）。

通过将 -scroll-mt-20 移至

，点击导航中的“Testimonials”链接后，标题将精准停驻在导航栏下方，实现专业级用户体验。