【jQuery】スクロール中は非表示になるトップへ戻るボタンの実装方法

2022/03/24

スクロール中か否かを判定して実装するトップへ戻るボタンの実装方法についてご紹介します。

サンプル

上記サンプルを下へスクロールしてみてください。
ページ上部にいるときはボタンは非表示になり、スクロール開始でボタンを表示されます。
またスクロール中はボタンは非表示になり、スクロールが完全にストップしたらボタンが表示されたと思います。
今回はこちらの実装方法について解説していきます。

HTMLの書き方

<section>Scroll Down</section>
<div class="button">↑</div>

トップへ戻るボタンには「button」クラスをつけておきましょう。

CSSの書き方

section{
  height: 1000px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding: 100px 50px;
}
.button{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  color: #fff;
  background: #000;
  transition: .3s;
  /* 非表示にする */
  opacity: 0;
  visibility: hidden;
}
.is-active{
  /* 表示する */
  opacity: 1;
  visibility: visible;
}

トップへ戻るボタンは「position: fixed」で右下へ追従するように設定します。
デフォルト設定では「opacity: 0」「visibility: hidden」で非表示にしておきます。

「is-active」クラスが付与されると「opacity: 1」「visibility: visible」で表示されるように設定してます。

JSの書き方

$(function(){
  var btn = $('.button');
  var timer;
  
  $(window).scroll(function() {
    //スクロール開始するとボタンを非表示
    btn.removeClass('is-active');
    
    //スクロール中はイベントの発火をキャンセルする
    clearTimeout(timer);
    
    //スクロールが停止して0.2秒後にイベントを発火する
    timer = setTimeout(function() {
      //スクロール位置を判定してページ上部のときはボタンを非表示にする
      if($(this).scrollTop()) {
        btn.addClass('is-active');
      }else{
        btn.removeClass('is-active');
      }
    }, 200);
  });
  
  //ボタンクリックでトップへ戻る
  btn.on('click',function () {
    $('body,html').animate({
      scrollTop: 0
    });
  });
});

スクロール中か否かを判定するには次のメソッドを利用します。