【JavaScriptで実現】スクロールで現れる「トップに戻る」ボタンの作り方

2023年5月7日2024年4月15日

【PR】この記事には広告を含む場合があります。

【 JavaScriptで実現】スクロールで現れる「トップに戻る」ボタンの作り方 — スクロールで現れる【JavaScriptで実現】「トップに戻る」ボタンの作り方

この記事では「JavaScript」を使って、任意の高さをスクロールした際に「トップに戻る」ボタンを表示させる方法について解説していきます。

ページの利便性を向上させる機能であり、Webページが一定の高さまでスクロールされたときに表示され、クリックするだけで瞬時にページの先頭に戻ることができます。
jQueryを使わずに、JavaScriptを用いて簡単に実装できるので、ぜひ記事を参考に実装してみてください。

今回実装するサンプルコード

今回使用するサンプルコードは下記の通りです。
スクロールすると右下に、トップに戻るボタンが表示されます。
表示されたトップに戻るボタンをクリックすることで一番上に戻ってきます。

See the Pen トップページボタンを表示させる方法 by moreo (@moreoweb) on CodePen.

JavaScriptでトップに戻るボタンを作成してみよう！

1. HTMLとCSSでボタンを作成

はじめにHTMLとCSSでボタンなどの要素を整えていきます。

HTMLコード

<div class="container">
  <p>スクロールしたらトップに戻るボタンを右下に表示</p>
  <div class="box top"></div>
  <div class="box contents "></div>
</div>
<footer class="footer">
//ページトップに戻るボタン表示
  <a href="#" class="page-top">
  </a>
</footer>

CSSコード

.container {
  width: 100%;
  max-width: 900px;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}

.box {
  width: 100%;
  height: 100vh;
}

p {
  text-align: center;
}

.box.top {
  background-color: rgb(179, 199, 245);
}

.box.contents {
  background-color: rgb(245, 237, 179);
}

.page-top {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #2158a5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 60px;
  bottom: 60px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
//.is-visibleクラスが付与されたら表示
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}
//矢印アイコンのスタイル
.page-top::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-bottom: -6px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(-45deg);
}

ボタンのデザインや矢印のデザインはお好みのデザインに変更するなど、アレンジして確認してみてください。

JavaScriptによる動作の実装

トップに戻るボタンの表示・非表示の切り替えや、ボタンがクリックされた際のページトップへのスクロール動作をJavaScriptで実装していきます。

window.addEventListener("DOMContentLoaded", function () {
  var pageTopBtn = document.querySelector(".page-top");
  pageTopBtn.addEventListener("click", function (event) {
    event.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });

  window.addEventListener("scroll", function () {
    // window.pageYOffset 現在の位置を取得
    if (window.pageYOffset > 100) {
      pageTopBtn.classList.add("is-visible");
    } else {
      pageTopBtn.classList.remove("is-visible");
    }
  });
});

コードの解説をしていきます。

上の段

上の段の記述では、ページのトップに戻るボタンがクリックされたとき、ページの先頭にスムーズにスクロールする機能を実装しています。

window.addEventListener("DOMContentLoaded", function () {
  var pageTopBtn = document.querySelector(".page-top");
  pageTopBtn.addEventListener("click", function (event) {
    event.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });

webページのコンテンツが読み込まれた後に動作するように、DOMContentLoadedイベントリスナーを使用しています。
次に、.page-topクラスの要素（トップに戻るボタン）を取得し、クリックイベントリスナーを追加しています。
ボタンがクリックされると、デフォルトのリンク動作がキャンセルされ、ページの先頭（top: 0）へスムーズなスクロールアニメーションが実行されます。

下の段

下の段の記述では、スクロール時にトップに戻るボタンの表示・非表示を切り替える機能を実装しています。

  window.addEventListener("scroll", function () {
    // window.pageYOffset 現在の位置を取得
    if (window.pageYOffset > 100) {
      pageTopBtn.classList.add("is-visible");
    } else {
      pageTopBtn.classList.remove("is-visible");
    }
  });
});