ページトップへ戻るボタンの作り方【JavaScript】

投稿日 1月 4, 2022
更新日 2月 11, 2024
著者しんぺー
カテゴリー Code

ページトップボタンをJavaScriptで実装したい人

JavaScriptで作るにはどうしたらいいんだろう？

カクカクした動きじゃなくてスルスルってなめらかに動かせるかな？

最初は非表示で、スクロールするとふんわりボタンが出現するようにしたいなぁ〜

ん〜なにをどう書けばいいんだ？

今回はこのような悩みに答えます。

しんぺー

こんにちは、フロントエンドエンジニアしんぺーです。

jQueryを使わず純粋なJavaScriptでページトップボタンを実装したいと思います。

JavaScriptの学習にもぴっかりかもしれません。

この記事を書いている僕は、独学でWeb制作を学び１年半で異業種からITベンチャーに転職しました。
日々、フロントエンドエンジニアとしてコーディングをしています。

ページトップボタンはjQueryで実装していることが多いのですが、JavaScriptだけで実装するにはどうすればいいのかな？と疑問に思い色々調べながら実装しました。
僕と同じようにJavaScriptで実装したい人や、JavaScript学習中の方にも分かりやすいように解説していきたいと思います。

完成形のイメージ

See the Pen
pagetop【JavaScript】 by shimpei (@shimpei)
on CodePen.

こんな感じです。スクロールしたりボタンを押したりして動きを確認してみて下さい。

コーディング（HTML & CSS）

HTMLはこれだけ。

<div class="pagetop">Top</div>

CSSは割愛しますが、position: fixed;で右下に固定しています（bottom: 30px; right: 30px;)。
デフォルトで非表示にしたいので、opacity: 0;にしています。

実装したい動き（JavaScript）

ボタンをクリックすると、スルスルっとスムーズにページトップへ

ボタンをクリックするとページトップへ戻る動作部分です。
クエリーセレクターで「.pagetop」要素を取得します。

const pagetop_btn = document.querySelector(".pagetop");

.pagetopをクリックしたら、ページ上部へスムーズに移動する部分

// .pagetopをクリックしたら
pagetop_btn.addEventListener("click", scroll_top);
// ページ上部へスムーズに移動
function scroll_top() {
window.scroll({ top: 0, behavior: "smooth" });
}

問題点を回避（IEとSafariに対応させる）

さきほど使用した「top」と「behavior」ですがSafariではsmoothが効かず、IEは非対応です。

smoothscroll.jsを読み込んで正常に動くようにします。
これで、どのブラウザでもボタンをクリックするとスルスルっとページトップへ移動するようになりました。

デフォルトでは非表示、スクロールで表示

ページトップボタンですが、最初は非表示で、スクロールすると表示させるようにします。
初期値はopacity: 0;で非表示。
100pxスクロールするとopacity: 1;で表示させています。

// スクロールされたら表示
window.addEventListener("scroll", scroll_event);
function scroll_event() {
  if (window.pageYOffset > 100) {
    pagetop_btn.style.opacity = "1";
  } else if (window.pageYOffset < 100) {
    pagetop_btn.style.opacity = "0";
  }
}

★星4つ以上人気のJavaScript書籍はこちら