一阶段项目总结 之 滚动监听回顶部

HTML代码：

<!-- 回顶部 -->
  <div class="jiantou">
   <a>↑</a>
  </div>

CSS代码：

jiantou{

 width: 40px;
 height: 40px;
 line-height: 40px;
 background: rgba(202,54,33,.7);
 color: #fff;
 text-align: center;
 font-size: 26px;
 font-weight: 900;
 bottom:20px ;
 right: 40px;
 transition: all .3s;
 text-decoration: none;

 position: fixed;
 z-index: 99;
 display: none;
 cursor: pointer;
}
.jiantou a{
 color: white;
}

JQ代码：

$(function() {
    /* 回顶部 */
    $(window).scroll(function() {
     var hui = $(document).scrollTop();
     // alert(hui);
     // console.log(hui);
     if (hui > 300) {
      $(".jiantou").fadeIn();
     } else {
      $(".jiantou").fadeOut();
     }
    })
    $(".jiantou").click(function(){
     $("html,body").animate({
     scrollTop:'0px'},500);
    })
   })