ページ先頭へ戻るボタンを作ってみよう！

ページ先頭へ戻るボタン

このボタンをクリックorタップしても何も起きません。この画面をスクロールすると、画面右下に現れる同じ画像をクリックするとページ先頭へスムーズに移動します。やってみてください。

コードはこちらから見ることができます。使用画像はボタン画像を右クリックしてダウンロードしてください。

HTML部分はオーソドックスなボタンのコードになっています。buttonタグで画像タグを挟んであります。

クラス「page-top」にposition: sticky;という一行を入れ、このボタン（HTML部分）をフッターのすぐ前に記述します。すると画面が読み込まれたときはページの上部までボタンが上がってきていて、画面を最下部までスクロールしていくと、フッターにかかる前に止まってくれます。

pageTop.addEventListener('click', () =>

window.scrollTo({ top: 0, behavior: 'smooth' })

);

画像をクリックすると、ページ先頭にスムーズに戻ります。scrollTo()でスクロールする場所を指定します。behavior: 'smooth'はスクロールをスムーズにするコードです。

window.addEventListener('scroll', () => {

pageTop.classList.toggle('hyouji', window.scrollY > 0);

});

で画像がクリックされると、ページの高さ（スクロール量）が0より大きい時、「hyouji」クラス（画像を表示するクラス。デフォルトでは画像は非表示になっています。）を付与し、表示させています。そのため、画像をクリックしてページ先頭へ戻ると、画像は非表示になります。