jquery实现点击按钮返回到页面顶部

应用场景：页面内容过长，同时每个页面有固定底部

HTML

<div class="back-to-top" id="js-backtotop" >
   <span>Back to Top</span>
</div>

CSS

.back-to-top {
    position: fixed;
    right: 0;
    bottom: 10px;
    height: 28px;
    width: 70px;
    z-index: 999;
    cursor: pointer;
    text-align: center;
    display: none;

    span {
        font-size: 10px;
        font-weight: 500;
        color: #707b7d;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0;
    }
}
.back-to-top:before {
    display: block;
    margin: 0 auto;
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #618ca0;
}

JS

$(document).ready(function() {
    var $backToTop = $('#js-backtotop');
     $(window).scroll(function(e) {
         var scrollTop = $(window).scrollTop();
         var winHeight = $(window).innerHeight();
         var footerTop = $("#footer").offset().top;
         var BackTopBtnDiff = (scrollTop + winHeight - footerTop + 10);
         if(BackTopBtnDiff > 0) {
             $backToTop.css({
                 'bottom': BackTopBtnDiff + 'px'
             });
         } else {
             $backToTop.css({
                 'bottom': '10px'
             });
         }
         if(scrollTop > (winHeight+100)) {
             $backToTop.fadeIn();
         } else {
             $backToTop.fadeOut();
         }
     })

     $backToTop.click(function() {
         $('html,body').animate({scrollTop: 0}, 500);
     })
 })