JavaScriptとCSSでページ最下部へスムーズにスクロールさせる方法

JavaScriptと少量のCSSを使って、長いWebページの一番下までユーザーをスムーズにスクロールさせる方法を解説します。

ユーザーがワンクリックでページの最下部まで滑らかに移動できるようにしたい場合、CSSのscroll-behaviorプロパティと、JavaScriptのscrollIntoView()メソッドを組み合わせるのが簡単で効果的です。

このチュートリアルでは、以下のものが必要になります。

• ブラウザ右側に縦スクロールバーが表示されるほどコンテンツ量のある長いWebページ
• ページ上部に配置したid付きのアンカー要素
• ページ下部に配置したid付きの任意の要素
• CSSプロパティscroll-behavior
• JavaScriptメソッドscrollIntoView()

それでは、実際のコード例を見ながら学んでいきましょう。

HTMLレイアウトのサンプル

以下のHTMLマークアップをそのまま使って試すことができます（<p>....</p> のダミー要素は、実際のコンテンツに置き換えても構いません）。

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

ポイントは、ページ上部に scroll-to-bottom というidを持つアンカー要素 <a> を1つ、そしてページ下部に page-bottom というidを持つ要素を1つ配置している点です。

CSS

スムーズスクロールを有効にするには、スタイルシートに以下のコードを追加します。

html {
  scroll-behavior: smooth;
}

/* レイアウト */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

注意：スクロールの動作を実現しているのは scroll-behavior: smooth; の部分だけです。それ以外のCSSは純粋に見た目を整えるための装飾です。

JavaScript

ユーザーが「Scroll to Bottom」をクリックしたときに、ページの上部から下部へスムーズにスクロールさせるには、以下のJavaScriptコードを追加します。

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

JavaScriptコードの仕組み

• まず、scroll-to-bottom と page-bottom の2つの要素を参照する変数を宣言します。
• 次に、scrollToBottom 変数に対してイベントリスナーを登録し、特にクリックイベントを監視するよう設定します。
• function() { .. } の中では、ページ下部の要素である pageBottom に対して scrollIntoView() メソッドを呼び出します。

これにより、「Scroll to Bottom」がクリックされるたびに関数が実行され、scrollIntoView メソッドによって page-bottom のidが付いた位置、つまりページの最下部まで自動的にスクロールされます。

注意：scroll-behavior: smooth; を削除しても、技術的にはスクロール自体は行われますが、動きが一瞬で切り替わる不自然なものになります。

なお、CSSプロパティを使わず純粋なバニラJavaScriptだけでスムーズスクロールを実装することも可能ですが、この記事の例よりもはるかに多くのコードが必要になります。

デモ用のコード一式もぜひ確認してみてください。

実際の活用シーンとは？

ひとつ思い浮かぶユースケースは、時間がなくて今すぐ読めない長文コンテンツに対して、訪問者がワンクリックで要約セクションへ素早くジャンプできるようにすることです。「目次へ戻る」「続きを読む」ボタンなどにも応用できます。

ブラウザ互換性について

scroll-behavior CSSプロパティは、Internet ExplorerやSafariではサポートされていません。これらのブラウザに対応する必要がある場合は、純粋なJavaScriptによる代替ソリューションを採用しましょう。モダンブラウザ（Chrome、Firefox、Edgeなど）であれば、本記事の方法がそのまま利用できます。