【jQuery】ページトップへ戻るボタンの作り方【フェードイン・アニメーション｜CodePen付き】

  <!-- reset.css destyle -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />

  <!-- jQueryのCDNへのパス -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  
</body>

  <!-- jQueryのCDNへのパス -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

  <!-- このサイトのスクリプトへのパス -->
  <script src="./script.js"></script>
</body>

  <!-- 上に戻るボタン（全ページ共通パーツ） -->
  <div id="page_top">
    <a class="c-up-to-btn_a" href="#">
      <img class="c-up-to-btn_img"
        src="https://shimizu-create.com/wp-content/uploads/2024/03/アセット-1@4x.png" alt="上に戻るボタン">     
    </a>      
  </div>
  <!-- 以下、footer -->

/* ------------------ */
/* 上に戻るボタン */
/* ------------------ */
/*　　ボタン関係の部品を全部囲うタグ：ここのidがjQueryの動作と連動する */
#page_top {
  position: fixed;
  bottom: 60px;
  right: 20px;
  opacity: 0.5;
}
/* ボタン画像のサイズ指定 */
.c-up-to-btn_img{
  width: 50px;
  height: 50px;
}

// 上へ戻るボタン
$(function(){
  var pagetop = $('#page_top');
  // 普段はボタン非表示
  pagetop.hide();
  // 100px スクロールしたらボタン表示（フェードインで） 
  $(window).scroll(function () {
     if ($(this).scrollTop() > 100) {
          pagetop.fadeIn();
     // そうじゃない場合は非表示（フェードアウトで）      
     } else {
          pagetop.fadeOut();
     }
  });
  // ボタンをクリックしたら500ミリ秒かけてページ上部（0pxの位置）までスクロールアップで移動
  pagetop.click(function () {
     $('body, html').animate({ scrollTop: 0 }, 500);
     return false;
  });
});