CSS Academy · 课时

scroll-behavior：smooth

Q: 「scroll-behavior：smooth」这节课中我会学到什么？

使用 scroll-behavior 为锚点链接和程序化滚动启用平滑滚动。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 scroll-behavior 为锚点链接和程序化滚动启用平滑滚动。

scroll-behavior：smooth 是 CoddyKit 上的免费 CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 scroll-behavior？

scroll-behavior 控制由导航触发的滚动（锚点链接、JavaScript scrollTo()）是应该平滑动画滚动，还是立即跳转。

scroll-behavior: smooth

在 html 或 body 元素上设置 scroll-behavior: smooth，会让页面中所有锚点链接导航以平滑动画进行：

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

立即跳转与平滑滚动

可用值：

auto（默认值）：立即跳转
smooth：以动画方式滚动到目标位置

锚点链接导航

启用平滑滚动后，点击类似 <a href="#contact"> 的链接，会平滑滚动到带有 id="contact" 的元素，而不是立即跳转。

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

使用平滑效果的 JavaScript scrollTo()

将 behavior: "smooth" 传递给 JavaScript 滚动方法，以实现动画滚动：

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

与 prefers-reduced-motion 的配合

平滑滚动可能会引发晕动症。对于偏好减少动态效果的用户，请始终将其禁用：

  <p>Respects <code>prefers-reduced-motion</code>.</p>

容器上的 scroll-behavior

将其应用于任何可滚动容器，而不仅仅是页面：

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

限制

CSS scroll-behavior 无法控制滚动时长或缓动效果。如需精确控制动画，请使用 JavaScript Web 动画 API，或使用带有滚动插件的 GSAP 等库。

用于固定页眉的 scroll-padding-top

当固定页眉覆盖锚点目标时，scroll-padding-top 会添加偏移量，使目标不会隐藏在页眉后面：

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin 与 scroll-padding

scroll-margin 直接在目标元素上添加偏移量；scroll-padding 则向滚动容器添加偏移量。两者都可以解决固定页眉造成的问题：

  <div class="section">Section content</div>

可访问性提示

平滑滚动是一种用户体验增强功能。请始终确保即使没有平滑滚动，锚点导航也能正常工作——不要依赖平滑滚动行为来实现功能，它只应负责优化视觉效果。

快速检查

如何确保为具有前庭运动敏感性的用户禁用平滑滚动动画？

回顾

在 html 上设置 scroll-behavior: smooth，可以为锚点链接和 JavaScript 滚动方法启用平滑动画滚动。使用 scroll-padding-top，可以让滚动目标与固定页眉错开。为了确保可访问性，请始终在 prefers-reduced-motion: reduce 媒体查询中禁用平滑滚动。

常见问题解答

「scroll-behavior：smooth」课时是免费的吗？

是的 — 「scroll-behavior：smooth」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「scroll-behavior：smooth」这节课中我会学到什么？

使用 scroll-behavior 为锚点链接和程序化滚动启用平滑滚动。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「scroll-behavior：smooth」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy