背景介紹 當頁面內容很多的時候，用戶可能會一直往下滑動頁面。但是當他想返回頁面頂部進行其他操作時，他可能需要不斷滾動滑鼠滾輪，這就導致用戶體驗將很差。鑒於這種情況， “回到頂部”這一功能便出現了。 如今在我們瀏覽網站的時候，常常能遇見“回到頂部”這個按鈕。目前主流的回到頁面頂部分表現為兩種，一種是直 ...
背景介紹
當頁面內容很多的時候，用戶可能會一直往下滑動頁面。但是當他想返回頁面頂部進行其他操作時，他可能需要不斷滾動滑鼠滾輪，這就導致用戶體驗將很差。鑒於這種情況， “回到頂部”這一功能便出現了。
如今在我們瀏覽網站的時候，常常能遇見“回到頂部”這個按鈕。目前主流的回到頁面頂部分表現為兩種，一種是直接回到頁面的頂部，這種方式簡單粗暴；另外一種則是自動滾動間接回到頁面頂部，這樣一來視覺體驗上可能更好，但是用戶需要過幾秒才能看到頂部內容。
例如掘金，在滾動到一定高度時會出現“回到頂部”按鈕，點擊後會直接回到頁面頂部，就是上文說到的第一種情況。
實現
動態顯示滾動按鈕
“回到頂部”並不是一直顯示的，而是滾動到一定值才出現的，因此應該在window.onscroll里定義一個判斷事件。
window.onscroll = function () {
var currentHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
// 頁面滾動超過300px就顯示
if (currentHeight > 300) {
document.getElementById('backtop').style.display = 'block'
} else {
document.getElementById('backtop').style.display = 'none'
}
}
直接回到頂部
錨點
最簡單的方法。給頂部的div一個id，點擊直接回到這個div元素，但是URL上會出現#top。
<div id="top"></div>
......
<a href="#top">回到頂部</a>
scrollTo函數
控制滾動條回到指定位置，第一個參數是距離頁面左端的距離，第二個參數是距離頁面頂部的距離。
<a href="javascript:scrollTo(0, 0)">回到頂部</a>
scrollTop函數
控制滾動條垂直偏移。
<a onclick="byScrollTop()">回到頂部</a>
......
function byScrollTop() {
document.documentElement.scrollTop = 0;
window.pageYOffset = 0; // 相容ios
document.body.scrollTop = 0; // 相容低版本ie
}
scrollBy函數
該方法可把內容滾動指定的像素數。第一個參數指向右滾動的像素，第二個參數指向下滾動的參數，負數可使方向相反。
<a onclick="byScrollBy()">回到頂部</a>
......
function byScrollBy() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
scrollBy(0, -topHeight);
}
間接回到頂部
定時器實現滾動動畫
通過定時器實現固定速度的自動滾動動畫效果。但是這樣會有個問題，就是當頁面內容十分多的時候，這個時候離頂部已經有很長一段距離了。如果還是一個固定速度的話，可能會長達10秒鐘，這對用戶體驗來說是不友好的。
<a onclick="scrollToTop()">回到頂部</a>
......
function scrollToTop() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
scrollBy(0, -100);
// 模擬滑鼠向上滾動事件
scrolldelay = setTimeout('scrollToTop()', 50);
// 清除滾動事件，避免無法向下移動
if (topHeight === 0) {
clearTimeout(scrolldelay);
scrolldelay = null;
}
}
定時器實現滾動動畫-改良版
基於上面這個問題，我們可以設置一個速度的最小值，讓滾動速度從快到慢，但也不至於過慢。
function scrollToTop() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
scrollBy(0, -speed);
// 模擬滑鼠向上滾動事件
scrolldelay = setTimeout('scrollToTop()', 50);
// 清除滾動事件，避免無法向下移動
if (topHeight === 0) {
clearTimeout(scrolldelay);
scrolldelay = null;
}
}
最終效果
完整代碼
<style>
a {
display: block;
}
#top {
height: 2000px;
background-color: #999
}
#backtop {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
background-color: #fff;
z-index: 9;
}
</style>
<body>
<div id="top">
這裡是頁面頂部
</div>
<div id="backtop">
<a href="#top">回到頂部-錨點</a>
<a href="javascript:scrollTo(0, 0)">回到頂部-scrollTo函數</a>
<a onclick="byScrollTop()">回到頂部-scrollTop函數</a>
<a onclick="byScrollBy()">回到頂部-scrollBy函數</a>
<a onclick="scrollToTop()">回到頂部-定時器動畫版</a>
</div>
<script>
window.onscroll = function () {
var currentHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
console.log(currentHeight, "currentHeight");
if (currentHeight > 300) {
document.getElementById('backtop').style.display = 'block'
} else {
document.getElementById('backtop').style.display = 'none'
}
}
function byScrollTop() {
document.documentElement.scrollTop = 0;
window.pageYOffset = 0; // 相容ios
document.body.scrollTop = 0; // 相容低版本ie
}
function byScrollBy() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
scrollBy(0, -topHeight);
}
function scrollToTop() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
scrollBy(0, -speed);
// 模擬滑鼠向上滾動事件
scrolldelay = setTimeout('scrollToTop()', 50);
// 清除滾動事件，避免無法向下移動
if (topHeight === 0) {
clearTimeout(scrolldelay);
scrolldelay = null;
}
}
</script>
</body>
