Blog スタッフブログ

今回は、画面右下に「ページトップに戻る」ボタンを表示し、クリックするとページの一番上までなめらかにスクロールする機能を実装する方法を紹介します。

LPのような長いページでは、最後まで読み進めたあとに先頭へ戻りたくなる場面がよくあります。そんなときにこのボタンがあると、ユーザーがスムーズに移動できて使いやすさが上がります。

実装方法はとてもシンプルで、HTMLでボタンを設置し、CSSで右下に固定表示、JavaScriptでクリック時のスクロール処理を追加するだけです。

今回は基本的な形として、常に右下に表示されるパターンを例にしています。

HTML側の処理

まずは、ページ内にボタンを設置します。

position: fixed; で画面に固定しても問題ありません。

<button id="pageTop" class="page-top">TOP</button>

JavaScript側の処理

ボタンをクリックしたときに、ページの一番上までなめらかにスクロールする処理を追加します。

const pageTopBtn = document.getElementById('pageTop');

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

動きのポイント

window.scrollTo() を使っているので、ページのスクロール位置を指定できます。
top: 0 は「ページの先頭」を意味し、behavior: 'smooth' を指定することで、瞬時に移動するのではなく、なめらかにスクロールしながら戻る動きになります。