スムーススクロールとは | バイブコーダーのための名称辞典

スムーススクロールとは

ページ内リンクなどでスクロール先に移動するとき、瞬時にではなくなめらかに移動させる CSS・JS の技法。

概要

ページ内リンク（アンカーリンク）をクリックしたときや、目次から特定の章に移動するときに、瞬時にジャンプするのではなく画面がなめらかにスクロールして移動する技法です。 CSS の scroll-behavior: smooth を指定するだけで実装できるほか、細かい速度調整をしたい場合は JavaScript でスクロール位置を計算する方法も使われます。長いページで今どのあたりにいるかを見失わせないための配慮として使われます。

別名

表記ゆれ：スムーススクロール、スムーズスクロール、scroll-behavior

「スムーズスクロール」と伸ばす表記もよく使われ、どちらで伝えても通じます。

AI への伝え方

「ページ内リンクはなめらかにスクロールするようにして」で伝わります。CSS だけで十分か、スクロールの速さまで細かく指定したいかを伝えると、scroll-behavior を使うか JavaScript を使うかの実装方針が決まります。スクロールの動きに酔いやすいユーザーのために、prefers-reduced-motion: reduce の環境では瞬時に移動する（scroll-behavior: auto）配慮も必要です。

似たパーツとの違い

「アンカーリンク」はページ内の特定の位置へ移動するリンクの仕組みそのもので、スムーススクロールはその移動をなめらかに見せる演出です。アンカーリンク自体はスムーススクロールなしでも成立します。「スクロールスナップ」はスクロールが特定の位置でピタッと止まる技法で、なめらかに移動し続けるスムーススクロールとは止まり方の性質が異なります。

デモ

コード

HTML

<div class="smooth-scroll-demo">
  <nav class="smooth-scroll-demo__toc">
    <a href="#smooth-scroll-demo-sec1">1 章</a>
    <a href="#smooth-scroll-demo-sec2">2 章</a>
    <a href="#smooth-scroll-demo-sec3">3 章</a>
  </nav>
  <section id="smooth-scroll-demo-sec1" class="smooth-scroll-demo__section">
    <h2>1 章</h2>
    <p>クリックすると、なめらかにスクロールして移動します。</p>
  </section>
  <section id="smooth-scroll-demo-sec2" class="smooth-scroll-demo__section">
    <h2>2 章</h2>
    <p>ここが 2 章です。</p>
  </section>
  <section id="smooth-scroll-demo-sec3" class="smooth-scroll-demo__section">
    <h2>3 章</h2>
    <p>ここが 3 章です。目次に戻って別の章に移動してみてください。</p>
  </section>
</div>

CSS

html {
  scroll-behavior: smooth;
}

.smooth-scroll-demo {
  font-family: sans-serif;
  color: #333333;
}

.smooth-scroll-demo__toc {
  position: sticky;
  top: 0;
  display: flex;
  gap: 16px;
  padding: 12px 0;
  margin-bottom: 16px;
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
}

.smooth-scroll-demo__toc a {
  color: #0017c1;
  text-decoration: none;
  font-size: 14px;
}

.smooth-scroll-demo__toc a:hover {
  text-decoration: underline;
}

.smooth-scroll-demo__section {
  min-height: 280px;
  padding: 16px 0;
  border-top: 1px solid #e6e6e6;
}

.smooth-scroll-demo__section h2 {
  margin: 0 0 8px;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}