【JavaScript】トップに戻るボタンの実装方法

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

画面下によく見かけるトップに戻るボタンの実装方法。よくあるやつです。

トップに戻るボタンの実装方法

  <div class="conteiner">
    <p>スクロール↓</p>
    <p>↓</p>
    <p>↓</p>
  </div>
  
  <div class="back-to-top" id="page-top">
    <a href=""></a>
  </div>

.conteiner {
  height: 3000px;
}


.back-to-top {
  z-index: 100;
  position: fixed;
  right: 11px;
  bottom: 61px;
  width: 35px;
  height: 35px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: red;
  cursor: pointer;
  transition: opacity .4s;
  opacity: 0;

}

.back-to-top a:before {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  content: "";
  transform: rotate(-45deg) translate(-17%, -50%);
  top: 50%;
  left: 50%;
}

document.addEventListener("DOMContentLoaded", function () {
  const pagetop = document.querySelector("#page-top");
  const scrollThreshold = 100;

  function scrollTop() {
    window.scroll({
      top: 0,
      behavior: "smooth",
    });
  }

  function scrollEvent() {
    if (window.scrollY > scrollThreshold) {
      pagetop.style.opacity = "1";
    } else {
      pagetop.style.opacity = "0";
    }
  }
  pagetop.addEventListener("click", scrollTop);
  window.addEventListener("scroll", scrollEvent);
});

See the Pen トップに戻るボタンの実装方法 by kuma0605 (@kuma0605) on CodePen.

初期状態ではトップに戻るボタンは非表示で、少しスクロールしたらふわっと表示。画面トップまで戻ると、トップに戻るボタンが非表示になります。

トップに戻るボタン自体はCSSでスタイルします（本題はJSなのでCSS解説は省略）。

以下の部分で、トップに戻るボタンを取得し変数に格納。あと、いくらスクロールしたらトップに戻るボタンを表示させるのか、というのをscrollThresholdの変数で数字は適当に100に設定。

  const pagetop = document.querySelector("#page-top");
  const scrollThreshold = 100;

以下の部分で、ページトップに戻る関数。top:0でトップにスクロールする位置、behavior: “smooth”でスムーズなスクロールの設定。

  function scrollTop() {
    window.scroll({
      top: 0,
      behavior: "smooth",
    });
  }

スクロールによってトップに戻るボタンの表示、非表示は以下の部分。

  function scrollEvent() {
    if (window.scrollY > scrollThreshold) {
      pagetop.style.opacity = "1";
    } else {
      pagetop.style.opacity = "0";
    }
  }

現在のスクロール位置が、最初に設定したscrollThresholdよりも大きい場合とそうでない場合をif文で処理を分ける。

大きい場合は、pagetop.style.opacity = “1”;でトップに戻るボタンを表示。そうでない場合はpagetop.style.opacity = “0”;で非表示。

あとはそれぞれイベントを以下の部分で登録。

  pagetop.addEventListener("click", scrollTop);
  window.addEventListener("scroll", scrollEvent);

クリックしたらscrollTop関数の処理が発火し、スクロールしたらscrollEvent関数の処理が発火する感じ。

ここまで読んでくださりありがとうございました。

JavaScript

この記事を書いた人

くまだ

記事一覧