页面中：返回顶部

1.  <a href="#"> </a>

 

2.  锚点定位

 

3.  动画形式

 (1) html

  <div class="goback" id="toTop">
    <div class="icon">
      <img src="./images/up.png" />
    </div>
    顶部
  </div>

   

 (2) css

.goback {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  bottom: 200px;
  right: 5%;
  background: #787878;
  font-size: 14px;
  color: #fff;
  text-align: center;
  z-index: 999999;
  display: none;
}
.goback .icon {
  width: 25px;
  height: 20px;
  padding-left: 12px;
  padding-top: 3px;
  margin-bottom: 5px;
}
.goback .icon img {
  width: 25px;
  height: 20px;
}

   

 (3) js

<script>
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
    $(function () {
          $(window).scroll(function(){
             if ($(window).scrollTop()>100){
                $("#toTop").fadeIn(1000);
             }
              else
                {
                   $("#toTop").fadeOut(1000);
                }
            });

             //当点击跳转链接后，回到页面顶部位置
             $("#toTop").click(function(){
                $('body,html').animate({scrollTop:0},500);
                return false;
           });
     });
</script>