php 回到顶部,javascript实现回到顶部特效_javascript技巧

HTML:

CSS:

#btn1{position:fixed;bottom:10px;right:10px;}

JS:

window.οnlοad=funcition(){

var oBtn=document.getElementById("btn");

var timer=null;

//申明一个变量看是否为系统还是用户滚动

var sBys=true;

window.οnscrοll=funcition(){

if(!sBys){

clearInterval(timer);

}

sBys=false;

}

oBtn.οnclick=funcition(){

timer = setInterval(funcition(){

//获取scrollTop

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

//当点击按钮回到顶部时计算缓冲速度

var ispeed=Math.floor(-scrollTop/8);

if(scrollTop==0){

clearInterval(timer)

}

sBys=true;

document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;

},30)

}

}

知识点：

1.计算速度(缓冲)向下取整

2.当scrollTop==0时需要清除定时器

3.需要判断是用户还是js操作滚动条，如果是用户操作就清除定时器

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！