jQueryで実装するページトップへ戻るボタン

jQueryでトップへ戻るボタンを実装したので備忘録として書きます。　
この記事のコードをコピペすれば誰でも実装できるはず！

html

<button class="sticky_button">
 <a href="#contact">追従BUTTON</a>
</button>

HTMLはこれだけです。デザインに応じてaタグの中身を変更しましょう。

css

body{
 background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
 height:3000px;

}
.sticky_button {
 bottom: 30px;
 display: none;
 position: fixed;
 right: 20px;
 z-index: 9999;
}

buttonタグのclass(.sticky_button)に表示する位置を指定しています。
今回はページ全体の右下部分に表示します。
※bodyのスタイルはわかりやすいように記述しているだけなので、適宜削除してください。

───────

script

$(document).ready(function () {
      var fixedElm = $('.sticky_button');//.sticky_btnを変数に代入
      var indicationPosition = 500;//要素が消える位置を指定する。
      var fixedHeight = fixedElm.height();//変数fixedElmの高さを取得
      $(window).on('scroll', function () {//scrollしたときにイベントが発火
        var sc = $(this).scrollTop();
          if($(window).scrollTop() > indicationPosition) {//もし、取得したスクロール位置がindicationPositionよりも大きい時
            fixedElm.fadeIn();
          } else {
            fixedElm.fadeOut();
          }
      });
      $(fixedElm).on('click',function(){//fixedElmを押した時にイベント発火
        $('body, html').animate({ scrollTop: 0 }, 500, 'swing');
        return false;
      });
    });

jQueryは直接コード部分に解説を記述しました。

※必ずjQuery本体をCDNなどで読み込んでください！

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

まとめ

なるべく簡潔に記述することを意識しました！　　
色々な書き方があるので、迷うこともありますが実装する状況に合わせて最適な記述方法ができるようになりたいと思います！
もっとこうしたこうがいいよー！などご意見いただけたら嬉しいです！