当サイトで使用しているような「一定の高さまでスクロールしたときふわっと表示し、クリックしたときに滑らかな動きでページトップに戻るボタン」の設置方法を解説します。

HTML

  <!-- ページトップボタン -->
  <footer class="footer">
      <a href="#" class="pagetop"></a>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery-3.2.1.min.js" charset="UTF-8"></script>
  <script src="../assets/js/jquery.easing.1.3.js" charset="UTF-8"></script>
  </body>
  

ページトップボタンは、footer開始タグ直下に設置します。 bodyの閉じタグ直前にはjQueryとeasingを読み込んでおきましょう。

CSS

      
    .pagetop {
      display: none;
      position: fixed;
      bottom: 30px;
      right: 3%;
      background-color: #999;
      border-radius: 50px;
      width: 40px;
      height: 40px;
      z-index: 10;
    }
    .pagetop::before {
      content:"";
      position:absolute;
      left: 12px;
      top: 16px;
      width: 14px;
      height: 14px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
    }
      

ボタンはCSSで最初は非表示しておきます。上記では疑似要素で矢印を作っていますが、これはimgでも大丈夫です。

JS

      
    $(function(){

      var topBtn = $(".pagetop");
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                topBtn.fadeIn();
            } else {
                topBtn.fadeOut();
            }
        });

      topBtn.on("click", function () {
        $("body,html").animate({
          "scrollTop": 0
        }, 1000, 'easeOutExpo');
        return false;
      });

    });
      

ウィンドウの高さを取得して、100pxスクロールしたら、ボタンを表示するという分岐を入れます。 ボタンをクリックしたら、animateを使ってeasingの動きで0px、つまりトップへ戻ります。