HTML代码:
<a href="javascript:;" id="btn" title="回到顶部">Top</a>
注意给body设置一个高度便于测试;
CSS代码:
a{ text-decoration: none; }
#btn { width:40px; height:40px; position:fixed; background: #aaa; color: #fff; right:25px; bottom:10px; display:none;text-align: center; line-height: 40px; }
#btn:hover { background: #999; }
JS代码:
window.onload = function(){
var btn = document.getElementById("btn");
var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度
var timer = null; //定义一个定时器
var isTop = true; //定义一个布尔值,用于判断是否到达顶部
window.onscroll = function(){
//获取滚动条的滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//如果滚动高度大于可视区域高度,则显示回到顶部按钮否则隐藏
btn.style.display = scrollTop >= clientHeight ? "block" : "none";
//判断当点击回到顶部按钮后滚动条在回滚过程中,若手动滚动滚动条,则清除定时器
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
//回到顶部按钮点击事件
btn.onclick = function(){
timer = setInterval( function(){
//获取滚动条的滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//用于设置速度差,产生缓动的效果
var speed = Math.floor(-scrollTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;
isTop =true; //用于阻止滚动事件清除定时器
if(scrollTop == 0){
clearInterval(timer);
}
},50 );
}
}