正文

jq回到顶部效果分析

IP云
IP云V管理员/3 阅读
06/26
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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

用到的知识点如下：

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);
});