回到顶部效果

Posted 2020-06-27

<style>
.box {
width: 1190px;
margin: 0 auto;
}
#btn {
width: 40px;
height: 40px;
background: url(images.png) no-repeat left top;//回到顶部的小箭头
position: fixed;
left: 50%;
margin-left: 600px;
bottom: 30px;
display: none;
}
#btn:hover {
background: url(images.png) no-repeat left -40px;//回到顶部的文字
}
</style>
<script>
window.onload = function() {
var obtn = document.getElementById("btn");
var cliHeight = document.documentElement.clientHeight;
var timer = null; //定时器
var isScrl = true;//判断是否滚动到顶部的参数

//当页面回到顶部时，滚动页面，取消回滚效果

window.onscroll = function() {
var oScrTop = document.body.scrollTop || document.documentElement.scrollTop; //兼容IE
if(oScrTop >= cliHeight){
obtn.style.display = "block";//滚动高度大于屏幕高度时显示
}else{
obtn.style.display = "none";//小于屏幕高度时隐藏
}
if(!isScrl){
clearInterval(timer);//清除定时器，避免重复执行
}
isScrl = false;//重置 参数
};

// 点击回到顶部
obtn.onclick = function() {
timer = setInterval(function() {
var oScrTop = document.body.scrollTop || document.documentElement.scrollTop;  //滚动条距离顶部高度
var ispeed = Math.floor(-oScrTop / 6);  //使之能够回到初始0位置

document.body.scrollTop = document.documentElement.scrollTop = oScrTop + ispeed; //计算使之平滑的减小距离顶部的高度
isScrl = true;
if(oScrTop == 0) {
clearInterval(timer); //当滚动到顶部时清除定时器
}
}, 30);
}
}
</script>

//结构部分
<div class="box">
<a href="javascript:;" id="btn"></a> //取消a链接的默认时间
</div>