用Javascript實現回到頂部效果
經常看到網頁中有回到頂部的效果，今天也研究一下回到頂部有哪些方法。眾所周知，用錨鏈接是實現回到最簡單的方法，但是從用戶體驗效果來說，並不是最好的。（錨鏈接回到頂部時太快了，而且用戶可能在看到某個感興趣的東西想停下來，卻停不下來），針對上面的缺點，我們試着用Javascript的方法來得到實現。思路是這個樣子的：
1、首先用html和css構建基本的例子，代碼如下
html部分：
<div class="box">
<img src="1.jpg"/>
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
css部分：
.box { width: 1190px; margin: 0 auto; }
#btn{ width: 40px; height: 40px; background-color: red; position: fixed; right: 0px; bottom: 60px; background: url(2.jpg) no-repeat left top; }
#btn:hover{ background: url(2.jpg) no-repeat left -40px; }
在這里應該注意的是：href="javascript:;"的目的是為了阻止瀏覽器默認行為。
2、下面我們就可以用Javascript來控制我們的例子
a、首先模仿錨鏈接回到頂部的效果，代碼如下：
window.onload = function(){
var obtn = document.getElementById('btn');
obtn.onclick = function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop = document.body.scrollTop = -200;
};
}
這里的效果為，鼠標每點擊一次，向上移動200像素（200像素是可以變化的），然后我們發現每次都要點擊覺得很麻煩，這里我們不妨為它添加一個定時器函數
b、添加定時器函數，代碼如下：
var timer = null;//在前面聲明
timer = setInterval(function(){},30);//里面接的是移動200px效果
在這里，我們覺得還不是那么的好，比如說“別人家”的效果距離頂部越近的時候，速度越慢；並且我們中間還有一個問題就是回到頂部之后，在想繼續往下看時不會繼續往下了。
c、清除定時器效果並控制回到頂部的速率，代碼如下：
//改變回到頂部的速度
var isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定時器效果
if(osTop == 0){
clearInterval(timer);
}
到這里，我們的效果差不多完成了，但是還是不能在滾動條滾動的時候，看到感興趣的內容停下來。
d、滾動條滾動即停，代碼如下：
var isTop = true;//先聲明
//滾動條滾動時觸發
window.onscroll = function(){
if(!isTop){
clearInterval(timer);
}
isTop = false;
};
isTop = true;//添加在obtn.onclick事件的timer中
到這里，我們還有一點小小的地方可以改動，就是當在可視窗口中，回到頂部是不出現的，到達一定值后才出現
e、回到頂部的顯示與隱藏，代碼如下：
/*在css中添加如下代碼：*/
#btn{display: none;}
//獲取頁面的可視窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
/*在window.onscroll中添加如下代碼，控制顯示與隱藏*/
//在滾動的時候增加判斷
var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特別注意這句，忘了的話很容易出錯
if (osTop >= clientHeight) {
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
這樣，回到頂部的效果就實現了，我們在看下完整的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript 回到頂部效果</title>
<style type="text/css">
#btn {
width: 40px;
height: 40px;
position: fixed;
display: none;
right: 0px;
bottom: 30px;
background: url(2.jpg) no-repeat left top;
}
#btn:hover {
background: url(2.jpg) no-repeat 0 -40px;
}
.box {
width: 1190px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
<script type="text/javascript">
window.onload = function() {
var obtn = document.getElementById('btn');
var timer = null;
var isTop = true;
//獲取頁面的可視窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滾動條滾動時觸發
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;
};
btn.onclick = function(){
//設置定時器
timer = setInterval(function(){
//獲取滾動條距離頂部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同時兼容了ie和Chrome瀏覽器
//減小的速度
var isSpeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//console.log( osTop + isSpeed);
isTop = true;
//判斷，然后清除定時器
if (osTop == 0) {
clearInterval(timer);
}
},30);
};
}
</script>
</body>
</html>
到這里，還要小結一下，在中間我們運用的知識點：
知識點回顧：
DOM：
1、document.getElementById()
2、document.documentElement.scrollTop
3、document.body.scrollTop
事件：
1、window.onload
2、window.onscroll
3、obtn.onclick
定時器的使用：
1、setInterval(function(){},30)
2、clearInterval(timer)