jq回到顶部效果分析

在浏览网页时，超出屏幕高度就会出现提上点击回到顶部的图标，点击即可回到页面顶部。

用到的知识点如下：

1、首先控制图标的显示和隐藏，先要获取浏览器的高度。

var wHeight = $(window).height;

2、鼠标滚动事件,并获取鼠标滚动距顶端的高度；进行比较。

$(document).scroll(function(){

var cHeight = $(document).scrollTop();

if(cHeight>wHeight){ $(".pig").show(); }else{ $(".pig").hide(); }; });

3、图标出现后的点击事件

var timer=0;
$(".pig").click(fuction(){
     timer=setInterval(function(){
          var backTop=$(document).scrollTop();//获取滚动的高度
          var step=backTop/5;//获取步长
          $(document).scrollTop(backTop-step); //执行向上
          if(backTop ==0){
              clearInterval(timer);
      }
     },30);
});

　　

　

来源：https://www.cnblogs.com/colorful-paopao1/p/8426415.html