html代码:
js代码:
<a href="javascript:;" style="width: 50px;height: 50px;background: red;position: fixed;bottom: 10px;right: 10px;cursor: pointer;
display: none;" class="btn">回到顶部</a>
<script>
window.onload = function(){
var myBtn = document.getElementsByClassName('btn');
var clientHeight = document.documentElement.clientHeight;
var timer = null;
console.log();//找到回到顶部的标签,我的是第一个,所以 myBtn[0]
window.onscroll = function(){console.log(myBtn[0]);
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if(osTop > clientHeight){
myBtn[0].style.display = 'block';
}else{
myBtn[0].style.display = 'none';
}
};
myBtn[0].onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var spd = Math.floor((-osTop) / 0);//设置回到顶部的速度
document.documentElement.scrollTop = osTop + spd;
document.body.scrollTop = osTop + spd;
if(osTop === 0){
clearInterval(timer);
}
},30);
};
}
</script>