背景介紹
當頁面內容很多的時候，用戶可能會一直往下滑動頁面，但是當他想回傳頁面頂部進行其他操作時，他可能需要不斷滾動滑鼠滾輪，這就導致用戶體驗將很差，鑒于這種情況， “回到頂部”這一功能便出現了，
如今在我們瀏覽網站的時候，常常能遇見“回到頂部”這個按鈕，目前主流的回到頁面頂部分表現為兩種，一種是直接回到頁面的頂部，這種方式簡單粗暴；另外一種則是自動滾動間接回到頁面頂部，這樣一來視覺體驗上可能更好，但是用戶需要過幾秒才能看到頂部內容，
例如掘金，在滾動到一定高度時會出現“回到頂部”按鈕，點擊后會直接回到頁面頂部，就是上文說到的第一種情況，
實作
動態顯示滾動按鈕
“回到頂部”并不是一直顯示的，而是滾動到一定值才出現的，因此應該在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="https://www.cnblogs.com/rainy-night/p/#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="https://www.cnblogs.com/rainy-night/p/#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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463530.html
標籤：JavaScript
上一篇：瀏覽器的渲染程序