<!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>
<title>Javascript 回到頂部效果</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
#btn {
width:40px;
height:40px;
position:fixed;
left:50%;
display: none;
margin-left:610px;
bottom:30px;
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top;
}
#btn:hover {
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -39px;
}
.box {
width:1190px;
margin:0 auto;
}</style>
</head>
<body>
<div>
<img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById('btn');
//獲取頁(yè)面可視區(qū)的高度
var clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
var timer = null;
//var isTop = true;
window.onscroll=function(){
var osTop=document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight){
//顯示按鈕
obtn.style.display="block";
}else {
//隱藏按鈕
obtn.style.display="none";
}
//if (!isTop){
// clearInterval(timer);
//}
//isTop = false;
}
obtn.onclick = function(){
//設(shè)置定時(shí)器
timer = setInterval(function(){
//獲取滾動(dòng)條距離頂部的高度
var osTop=document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
//isTop = true;
console.log(osTop +ispeed);
if (osTop == 0){
clearInterval(timer);
}
},30);
}
}
</script>
</body>
</html>老師注釋的部分有什么作用，不要也沒(méi)什么問(wèn)題吧
2014-09-23
你好，isTop 這段是用來(lái)判斷用戶(hù)是否有滾動(dòng)或拖動(dòng)滾動(dòng)條了的，所以最好還是用上，你可以嘗試下去掉和沒(méi)去掉兩種效果。 :)