【JavaScript】スムーススクロールで快適な「ページ上部へ戻る」ボタンを実装しよう

ウェブサイトやブログのページが長い場合、ユーザーはページの最下部までスクロールした後、再び上部に戻りたいことがあります。この時、スムーススクロール付きの「ページ上部へ戻る」ボタンがあると非常に便利です。今回は、このボタンの作成方法を紹介します。

ボタンのHTMLを追加

まずは、ページに戻るボタンを追加します。

<button id="back-to-top">上に戻る</button>

このコードは、ボタンのHTMLをページに追加します。id属性を使って後でJavaScriptやCSSからこのボタンを参照できるようにしています。

ボタンのスタイルを設定

次に、ボタンの位置や見た目をCSSで設定します。

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

position: fixedにより、ボタンは画面の右下に固定されます。display: noneで初めは非表示に設定しています。

スムーススクロールの実装

JavaScriptを使って、ボタンをクリックした際にページの最上部までスムーズにスクロールする機能を実装します。

const backToTopButton = document.getElementById('back-to-top');

backToTopButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

window.scrollToメソッドを使い、behavior: ‘smooth’と設定することでスムーズなスクロールが実現できます。

ボタンの表示/非表示を制御

最後に、ユーザーがページを下にスクロールした際にボタンを表示し、ページの上部に戻ったときには非表示にする機能を追加します。

window.addEventListener('scroll', () => {
  if (window.scrollY > 300) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});

まとめ

これで、スムーススクロールつきの「ページ上部へ戻る」ボタンの実装は完了です。ページが長いウェブサイトやブログにこの機能を追加することで、ユーザー体験を向上させることができます。是非、あなたのサイトにも導入してみてください！