如何用純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)); // 控制滾動速度
          }
        }
      }