JavaScriptでつくるトップへ戻るボタン

2023/03/28 2023/03/29

jQueryを使わずにJavaScriptでつくる「トップへ戻るボタン」の実装方法をご紹介します。
JavaScriptの要素取得や、イベント処理の仕組みを理解すれば簡単に実装することができます。
それでは見ていきましょう。

まずはサンプルをご覧ください

上記のサンプルを下にスクロールしてみてください。
右下から遅れてボタンが出現して、クリックするとページ上部にスムーススクロールして移動すると思います。
今回はこちらの実装方法について解説していきます。

HTMLの記述

<div class="container">
  <p>下にスクロールしてください。</p>
  <button class="js-backToTop">TOP</button>
</dic>

JavaScriptでボタン要素を取得しますので、該当する要素に「js-backToTop」とクラス名を付けます。

CSSの記述

.container {
  height: 2000px;
  padding: 60px 20px;
}
p {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
/* ボタンの指定 */
button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
/* クラス付与時の指定 */
.is-active {
  opacity: 1;
  visibility: visible;
}

ボタン要素は「position: fixed」で右下に固定表示して、「opacity: 0」と「visibility: hidden」で非表示になるように指定しています。

JavaScriptの記述

//要素を取得
const button = document.querySelector('.js-backToTop');

//クリックイベント
button.addEventListener('click', () => {
  //ページ上部へスムーススクロール
  window.scroll({ 
    top: 0, 
    behavior: "smooth"
  });
});

//スクロールイベント
window.addEventListener('scroll', () => {
  //スクロール量を判定して要素にクラスを付与
  if(window.scrollY > 100){
    button.classList.add('is-active');
  }else{
    button.classList.remove('is-active');
  }
});

「querySelector」で要素を取得して、クリックイベント、スクロールイベントでそれぞれ処理を分けています。

クリックイベントでは「window.scroll」でウィンドウを特定の位置までスクロールすることができます。オプションでスクロールポジションを「top: 0」挙動を「behavior: “smooth”」にすることで、ページトップにスムーススクロールしています。

スクロールイベントでは「window.scrollY」でスクロール位置を取得して、ページ上部から100px以上の場合はクラスを追加、それ以外の場合はクラスを削除する処理をしています。