<section>Scroll Down</section>
<div class="button">↑</div>
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;
}
$(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
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js