頁面回到頂部的實現及原理
阿新 • • 發佈：2018-12-31
轉自：http://www.mojidong.com/html/css/js/2013/03/03/page-top-to-achieve/
現在很多網頁都有一個回到頂部的功能，當你拖動滾動條往下拉到一定程度就會在右下方顯示一個回到頂部的按鈕，點選則可以立即回到頁面頂部，非常貼心的設計。
今天打算自己做一個，分析了一下，要點如下
- 監聽當前頁面滾動事件
- 當滾動到一定畫素顯示回到頂部的按鈕
- 給回到頂部按鈕繫結點選事件，點選按鈕讓滾動條回到頂部並隱藏按鈕
核心點主要在js控制按鈕的顯示和隱藏及點選按鈕回到頂部及如何控制回到頂部按鈕不隨文件滾動
js虛擬碼如下
//繫結頁面滾動事件
$(document).bind('scroll', 讓按鈕不隨文件滾動需要使用到css屬性position
static：無特殊定位，物件遵循正常文件流。top，right，bottom，left等屬性不會被應用。
relative：物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。
absolute：物件脫離正常文件流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動。IE6及以下不支援此引數值
很明顯我們需要fixed(ie6真是蛋疼)
思路有了就寫測試程式碼
<!DOCTYPE HTML>
<html>
<head 測試結果不是很令人滿意，拖動滾動條按鈕是顯示出來了，但是點選卻沒有回到頂部。
原來問題出在滾動操作的物件上，將document換成body
//繫結回到頂部按鈕的點選事件
$('#up').click(function(){
//動畫效果，平滑滾動回到頂部
$('body').animate({ scrollTop: 0 });
//不需要動畫則直接
//$('body').scrollTop(0)
})
測試一切ok
以為這樣就完了，你太天真了少年
瀏覽器相容，攻城師心中永遠的痛~
程式碼在ie上不給力，滾動顯示不了按鈕，滾到底都顯示不出來，崩潰。
原來事件要綁在window上
//繫結頁面滾動事件
$(window).bind('scroll',function(){
var len=$(this).scrollTop()
if(len>=100){
//顯示回到頂部按鈕
$('#up').show();
}else{
//影藏回到頂部按鈕
$('#up').hide();
}
})
上最終程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>回到頂部demo</title>
<style type="text/css">
.up{
position:fixed;
bottom:20px;
right:20px;
width:10px;
display:none;
}
</style>
</head>
<body>
<div style="background:rgb(200,200,200);height:2000px;">我很長</div>
<a id="up" href="javascript:;" class="up">回到頂部</a>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//繫結頁面滾動事件
$(window).bind('scroll',function(){
var len=$(this).scrollTop()
if(len>=100){
//顯示回到頂部按鈕
$('#up').show();
}else{
//影藏回到頂部按鈕
$('#up').hide();
}
})
//繫結回到頂部按鈕的點選事件
$('#up').click(function(){
//動畫效果，平滑滾動回到頂部
$(document).animate({ scrollTop: 0 });
//不需要動畫則直接
//$(document).scrollTop(0)
})
</script>
</html>