JavaScriptとCSSを使用してページの一番下までスムーズにスクロールする方法

JavaScriptとほんの少しのCSSを使用して、ユーザーを長いWebページの一番下までスムーズにスクロールする方法を学びます。

ユーザーがページの一番下までスムーズにスクロールできるようにする場合は、scroll-behaviorというCSSプロパティを使用できます。 scrollIntoView()と呼ばれるJavaScriptメソッド 。

次のものが必要です：

• ブラウザの右側にあるy軸スクロールバーをアクティブにするのに十分なコンテンツを含む長いWebページ
• ページ上部にあるidのアンカー要素
• idを持つ要素 ページの下部にある
• scroll-behavior CSSプロパティ
• scrollIntoView() JavaScriptプロパティ

例を挙げて学びましょう！

HTMLレイアウトの例

次のHTMLマークアップの例を使用して学習できます（<p>....</p> dummy elementsを自由に置き換えてください 実際のコンテンツで）：

<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>

アンカー要素が1つあることに注意してください<a> 上部にscroll-to-bottomのIDがあります 、およびIDがpage-bottomの下部にある1つの要素 。

CSS

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

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

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

注：スクロールの魔法はscroll-behavior: smooth;に由来します 、上記のCSSスタイルの残りの部分は純粋に表面的なものです。

JavaScript

ユーザーが下にスクロールをクリックしたときに、ユーザーをページの上から下にスムーズにスクロールするには 次のJavaScriptコードを追加します：

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

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

JavaScriptコードの仕組み

• 最初に、scroll-to-bottomを参照する2つの変数を宣言します。 およびpage-bottom それぞれ。
• 次に、イベントリスナーをscrollToBottomにアタッチします 変数を指定して、クリックイベントを具体的にリッスンするように依頼します。
• function() { .. }の内部 scrollIntoView()を添付します ページ下部の要素へのメソッドpageBottom 。

これで、誰かが下にスクロールをクリックするたびに この関数はscrollIntoViewを実行します メソッドを使用して、ユーザーを一番下までスクロールします。ここで、page-bottom IDが見つかりました。

注：scroll-behavior: smooth;を削除した場合 スクロールは技術的には引き続き行われますが、突然発生します。

純粋なバニラJavaScript（CSSプロパティなし）を使用してスムーズなスクロールを作成することもできますが、この例に表示されているものよりもはるかに多くのコードが必要です。

すべてのデモコードを確認してください。

実際の生活で一番下までスクロールするとどのように役立ちますか？

頭に浮かぶユースケースの1つは、訪問者が今すぐ読む時間がない可能性のある長いコンテンツの要約にすばやくスクロールできるようにすることです。

ブラウザの互換性

scroll-behavior CSSプロパティは、InternetExplorerまたはSafariと互換性がありません。これらのブラウザには、純粋なJavaScriptソリューションが必要です。