用Javascript實現回到頂部效果
阿新 • • 發佈：2018-12-05
經常看到網頁中有回到頂部的效果，今天也研究一下回到頂部有哪些方法。眾所周知，用錨鏈接是實現回到最簡單的方法，但是從使用者體驗效果來說，並不是最好的。（錨鏈接回到頂部時太快了，而且使用者可能在看到某個感興趣的東西想停下來，卻停不下來），針對上面的缺點，我們試著用Javascript的方法來得到實現。思路是這個樣子的：
1、首先用html和css構建基本的例子，程式碼如下
| 1 2 3 4 5 6 7 8 9 10 |
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; 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、首先模仿錨鏈接回到頂部的效果，程式碼如下：
| 1 2 3 4 5 6 7 |
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、新增定時器函式，程式碼如下：
| 1 2 |
var
timer =
null
;
//在前面宣告
timer = setInterval(function(){},30);
//裡面接的是移動200px效果
|
在這裡，我們覺得還不是那麼的好，比如說“別人家”的效果距離頂部越近的時候，速度越慢；並且我們中間還有一個問題就是回到頂部之後，在想繼續往下看時不會繼續往下了。
c、清除定時器效果並控制回到頂部的速率，程式碼如下：
| 1 2 3 4 5 6 7 |
//改變回到頂部的速度
var
isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定時器效果
if
(osTop == 0){
clearInterval(timer);
}
|
到這裡，我們的效果差不多完成了，但是還是不能在滾動條滾動的時候，看到感興趣的內容停下來。
d、滾動條滾動即停，程式碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
var
isTop =
true
;
//先宣告
//滾動條滾動時觸發
window.onscroll = function(){
if
(!isTop){
clearInterval(timer);
}
isTop =
false
;
};
isTop =
true
;
//新增在obtn.onclick事件的timer中
|
到這裡，我們還有一點小小的地方可以改動，就是當在可視視窗中，回到頂部是不出現的，到達一定值後才出現
e、回到頂部的顯示與隱藏，程式碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*在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'
;
}
|
這樣，回到頂部的效果就實現了，我們在看下完整的程式碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!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>
|
到這裡，還要小結一下，在中間我們運用的知識點：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
知識點回顧：
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)
|