<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
}
#btn{
width: 60px;
height: 60px;
background: #ccc;
position: absolute;
right: 20px;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
var timer=null;
var b;
setTop();
// 正常情况下 ,定时器执行一下b=1,然后滚动条滚动b=2,即121212这样连续交替,
// 但如果出现122121222这种2连续出现(即2前面不是1)的情况,说明有其他操作(滚动鼠标滚轮或拖动滚动条的情况)使滚动条发生滚动
// 此时,应清除定时器
window.onscroll=function(){
if (b!=1) {
clearInterval(timer);
}
setTop();
b=2;
}
oBtn.onclick=function(){
clearInterval(timer);
var iCur=iSpeed=0;
timer=setInterval(function(){
iCur=document.documentElement.scrollTop || document.body.scrollTop;
iSpeed=Math.floor( ( 0 - iCur )/8 );
if (iCur==0) {
clearInterval(timer);
}else{
document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
}
b=1;
},30)
}
function setTop(){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
oBtn.style.top=scrollTop + document.documentElement.clientHeight-oBtn.offsetHeight-20+'px';
}
}
</script>
</head>
<body>
<div id="btn"></div>
</body>
</html>
js运动实例-带运动的返回顶部效果
最新推荐文章于 2022-11-07 15:56:17 发布