主要用到的知识:
获取滚动条距离顶部的高度:
document.documentgetElement.scrollTop(IE)
document.body.scrollTop(chrome)
获取页面可视区的高度:
- document.documentElement.clientHeight
- document.body.clientHeight
<a href="#">
点击a锚点可直接回到顶部
注意:
- 点击时速度由快到慢
- 滚动条滑到第二页面才出现
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Javascript 返回顶部</title>
<style type="text/css">
#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}
.bg {width:1190px; margin:0 auto;}
</style>
<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById('btn');
//获取页面可视区的高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var timer = null;
var isTop = true;
obtn.onclick = function(){
//设置定时器
timer = setInterval(function(){
//获取滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight){
toTopButton.style.display = "block";
}else {
toTopButton.style.display = "none";
}
if (!isTop){
clearInterval(timer);
}
isTop = false;
var ispeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
isTop = true;
if (osTop == 0){
clearInterval(timer);
}
},30);
};
};
</script>
</head>
<body>
<a href="javascript:;" id="btn" title="回到顶部"></a>
<div class="bg">
<img src="images/tb_bg.jpg" alt="" />
</div>
</body>
</html>
以上根据慕课网回到顶部效果视频总结