jQueryでback to top

画面右下に、ページTOPへ戻るためのボタンを表示します。
これってHTMLだけでも実現可能ですが、jQueryを使って下にスクロールした時だけ表示するとか、アニメーションで戻すといった表示を実現するためコレ（↓）を採用。

JavaScript(jQuery)

<!-- back to top -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタンを表示
            $(".back-to-top").fadeIn(); 
        } else {
            $(".back-to-top").fadeOut();
        }
    });
    $(".back-to-top").click(function() {
        $("body,html").animate({scrollTop:0},800); // 800msかけて上に戻る
    });
  });
</script>
<!-- back to top -->

HTML

<a href="#" class="back-to-top"></a>

CSS

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    color: #fff;
    width: 40px;
    height: 40px;
    z-index: 2;
    display: none;
}
.back-to-top:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background: #000000;
}
.back-to-top:after {
    content: "↑";
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}