如何用純js實現返回頁面頂部功能
更新時間:2024年06月21日 08:56:23 作者:Rattenking
頁面返回頂部是在Web中常見的效果,在一個很長的頁面中,頁面返回頂部按鈕可以方便用戶回到頁面的頂部,增強用戶體驗,這篇文章主要給大家介紹了關于如何用純js實現返回頁面頂部功能的相關資料,需要的朋友可以參考下
1. 需求場景
點擊頁面中的浮標,頁面自動返回頂部。
2. 需求實現分析
- 直接使用 body 或者 documentElement 的 scrollTop 屬性,直接設置為 0;就能返回頁面頂部;
- 使用 window.scrollTo 方法,實現返回頁面頂部。
3. 方案一:直接返回頂部
3.1 代碼邏輯分析
- 獲取返回頂部按鈕;
- 當頁面滾動時顯示或隱藏返回頂部按鈕;
2.1 獲取當前滾動的位置;
2.2 判斷是否超過設置的顯示距離,超過就顯示,否則就隱藏; - 滾動到頂部。
3.2 代碼實現
function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
// 獲取返回頂部按鈕
let backToTopButton = document.getElementById(elem);
// 當頁面滾動時顯示或隱藏返回頂部按鈕
window.onscroll = function() {
// 獲取當前滾動的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 判斷是否超過設置的顯示距離,超過就顯示,否則就隱藏
if (currentScroll > showDistance) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};
// 滾動到頂部
backToTopButton.addEventListener("click", function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
}
3.3 總結
- 由于直接設置 scrollTop 為 0,因此執(zhí)行過程不夠平滑,直接返回頂部,體驗不好!
4. 方案二:平滑滾動
4.1 代碼實現分析
- 獲取返回頂部按鈕;
- 當頁面滾動時顯示或隱藏返回頂部按鈕;
2.1 獲取當前滾動的位置;
2.2 判斷是否超過設置的顯示距離,超過就顯示,否則就隱藏; - 平滑滾動到頂部;
3.1 獲取當前滾動的位置;
3.2 如果當前不在頂部,則開始滾動動畫;
3.3 到達指定位置,執(zhí)行回調函數; - 滾動函數;
4.1 獲取當前滾動的位置;
4.2 如果當前不在頂部,則開始滾動動畫;
4.3 控制滾動速度。
4.2 代碼實現
function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
// 獲取返回頂部按鈕
let backToTopButton = document.getElementById(elem);
// 當頁面滾動時顯示或隱藏返回頂部按鈕
window.onscroll = function() {
// 獲取當前滾動的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 判斷是否超過設置的顯示距離,超過就顯示,否則就隱藏
if (currentScroll > showDistance) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};
// 平滑滾動到頂部
backToTopButton.addEventListener("click", function() {
// 獲取當前滾動的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 如果當前不在頂部,則開始滾動動畫
if (currentScroll > top) {
window.requestAnimationFrame(smoothScroll); // 運行動畫
} else {
// 到達指定位置,執(zhí)行回調函數
callback && callback();
}
});
// 滾動函數
function smoothScroll() {
// 獲取當前滾動的位置
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 如果當前不在頂部,則開始滾動動畫
if (currentScroll > top) {
window.requestAnimationFrame(smoothScroll);
window.scrollTo(0, currentScroll - (currentScroll / speed)); // 控制滾動速度
}
}
}
4.3 總結
- 實現了平滑滾動到頂部;
- 在滾動完成后執(zhí)行回調函數。
5. 注意
- 使用CSS來添加一些過渡效果會讓滾動更加平滑,并增強用戶體驗??梢蕴砑右韵翪SS代碼:
html {
scroll-behavior: smooth;
}總結
到此這篇關于如何用純js實現返回頁面頂部功能的文章就介紹到這了,更多相關js返回頁面頂部內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
淺談javascript的url參數parse和build函數
下面小編就為大家?guī)硪黄獪\談javascript的url參數parse和build函數。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
詳解ES6 export default 和 import語句中的解構賦值
這篇文章主要介紹了詳解ES6 export default 和 import語句中的解構賦值,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
VS2008中使用JavaScript調用WebServices
這篇文章主要介紹了VS2008中使用JavaScript調用WebServices,需要的朋友可以參考下2014-12-12

