<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部!?!</title>
<style>
.box{
width:1190px;
margin:0px auto;
}
#btn{
position:fixed;
width:40px;
height:40px;
background:url("top_bg.png") 0px 0px;
bottom:50px;
right:50px;
display:none;
}
#btn:hover{
background-position:0px -40px;
}
</style>
</head>
<body>
<div>
<imgsrc="tb_bg.jpg" alt="">
</div>
<ahref="javascript:;" id="btn"></a>
<script>
//文档根节点HTML的可是高度
var xHeight =document.documentElement.clientHeight;
//获取回到顶部按钮
var qBtn =document.getElementById("btn");
//变量
var time;
//记录滚动条滚动触发机制
var isScroll= true;
//绑定滚动条滚动事件
window.οnscrοll= function(){
//获取滚动条垂直方向的距离
varsTop = document.documentElement.scrollTop || document.body.scrollTop;
//如果滚动条垂直距离超出了html的可视区域，则显示回到顶部按钮
if(sTop>xHeight){
qBtn.style.display= "block";
}else{
qBtn.style.display= "none";
}
//执行点击回到顶部按钮滚动条滚动的操作时，isScroll = true;
//滚动滚轮 or 鼠标拖动滚动条时，isScroll = false;
if(!isScroll){
clearInterval(time);
}
isScroll= false;
}
//回到顶部按钮点击事件
qBtn.οnclick= function(){
//设置计时器
time= setInterval(function(){
//判断滚动条位置
varsTop = document.documentElement.scrollTop || document.body.scrollTop;
//判断滚动条是否回到了顶部
if(sTop==0){
clearInterval(time);
return;
}
//滚动条匀速回到顶部
// document.documentElement.scrollTop= sTop-10;
//设置由快到慢回到的顶部的效果
//存在问题，sTop==0;无法实现，计时器无法关闭
// variSpeed = Math.floor(sTop/6);
//解决方法
variSpeed = Math.floor(-sTop/6);
document.documentElement.scrollTop= sTop+iSpeed;
//点击回到顶部按钮触发滚动事件不需要清除计时器
isScroll= true;
},100);
}
</script>
</body>
</html>
效果：按下按钮后，页面将以由快至慢的效果，回到顶部
1567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
