實現原理：

當滾動條的垂直偏移大於一定值時，正方形緩慢出現（height由0變為50px），反之，當其小於一定值時，正方形緩慢消失；

若點選正方形，則觸發動畫效果直到scrollTop為0，即到達頁面頂部。

HTML

<a href="#header" id="backtop"></a>

CSS

#backtop{
  z-index: 999;
  position: fixed;
  bottom: 10px;
  right: 50px; 
  width: 50px; 
  height: 0;
  background-color: green;
  /* background: url(../images/backtop.png) center no-repeat; */
  transition: 1s;
}
#backtop.show {
   height: 50px;
}
/* html,body{height:auto;} */
 

JQuery

$(function(){
    $(window).scroll(function(){
      $(this).scrollTop()>10?$("#backtop").addClass('show'):$("#backtop").removeClass('show');
    })
    $("#backtop").click(function(){
      $("html,body").animate({scrollTop:0},700);
    })
})