快捷導(dǎo)航

如何用純js實(shí)現(xiàn)返回頁(yè)面頂部功能

更新時(shí)間：2024年06月21日 08:56:23 作者：Rattenking

頁(yè)面返回頂部是在Web中常見(jiàn)的效果,在一個(gè)很長(zhǎng)的頁(yè)面中,頁(yè)面返回頂部按鈕可以方便用戶回到頁(yè)面的頂部,增強(qiáng)用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于如何用純js實(shí)現(xiàn)返回頁(yè)面頂部功能的相關(guān)資料,需要的朋友可以參考下

1. 需求場(chǎng)景

點(diǎn)擊頁(yè)面中的浮標(biāo)，頁(yè)面自動(dòng)返回頂部。

2. 需求實(shí)現(xiàn)分析

直接使用 body 或者 documentElement 的 scrollTop 屬性，直接設(shè)置為 0；就能返回頁(yè)面頂部；
使用 window.scrollTo 方法，實(shí)現(xiàn)返回頁(yè)面頂部。

3. 方案一：直接返回頂部

3.1 代碼邏輯分析

獲取返回頂部按鈕;
當(dāng)頁(yè)面滾動(dòng)時(shí)顯示或隱藏返回頂部按鈕;
2.1 獲取當(dāng)前滾動(dòng)的位置;
2.2 判斷是否超過(guò)設(shè)置的顯示距離，超過(guò)就顯示，否則就隱藏;
滾動(dòng)到頂部。

3.2 代碼實(shí)現(xiàn)

      function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
        // 獲取返回頂部按鈕
        let backToTopButton = document.getElementById(elem);
        // 當(dāng)頁(yè)面滾動(dòng)時(shí)顯示或隱藏返回頂部按鈕
        window.onscroll = function() {
          // 獲取當(dāng)前滾動(dòng)的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 判斷是否超過(guò)設(shè)置的顯示距離，超過(guò)就顯示，否則就隱藏
          if (currentScroll  > showDistance) {
            backToTopButton.style.display = "block";
          } else {
            backToTopButton.style.display = "none";
          }
        };
        // 滾動(dòng)到頂部
        backToTopButton.addEventListener("click", function() {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        });
      }

3.3 總結(jié)

由于直接設(shè)置 scrollTop 為 0，因此執(zhí)行過(guò)程不夠平滑，直接返回頂部，體驗(yàn)不好！

4. 方案二：平滑滾動(dòng)

4.1 代碼實(shí)現(xiàn)分析

獲取返回頂部按鈕；
當(dāng)頁(yè)面滾動(dòng)時(shí)顯示或隱藏返回頂部按鈕；
2.1 獲取當(dāng)前滾動(dòng)的位置；
2.2 判斷是否超過(guò)設(shè)置的顯示距離，超過(guò)就顯示，否則就隱藏；
平滑滾動(dòng)到頂部；
3.1 獲取當(dāng)前滾動(dòng)的位置；
3.2 如果當(dāng)前不在頂部，則開(kāi)始滾動(dòng)動(dòng)畫；
3.3 到達(dá)指定位置，執(zhí)行回調(diào)函數(shù)；
滾動(dòng)函數(shù)；
4.1 獲取當(dāng)前滾動(dòng)的位置；
4.2 如果當(dāng)前不在頂部，則開(kāi)始滾動(dòng)動(dòng)畫；
4.3 控制滾動(dòng)速度。

4.2 代碼實(shí)現(xiàn)

     function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
        // 獲取返回頂部按鈕
        let backToTopButton = document.getElementById(elem);
        // 當(dāng)頁(yè)面滾動(dòng)時(shí)顯示或隱藏返回頂部按鈕
        window.onscroll = function() {
          // 獲取當(dāng)前滾動(dòng)的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 判斷是否超過(guò)設(shè)置的顯示距離，超過(guò)就顯示，否則就隱藏
          if (currentScroll > showDistance) {
            backToTopButton.style.display = "block";
          } else {
            backToTopButton.style.display = "none";
          }
        };
        // 平滑滾動(dòng)到頂部
        backToTopButton.addEventListener("click", function() {
          // 獲取當(dāng)前滾動(dòng)的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 如果當(dāng)前不在頂部，則開(kāi)始滾動(dòng)動(dòng)畫
          if (currentScroll > top) {
            window.requestAnimationFrame(smoothScroll); // 運(yùn)行動(dòng)畫
          } else {
            // 到達(dá)指定位置，執(zhí)行回調(diào)函數(shù)
            callback && callback();
          }
        });
		// 滾動(dòng)函數(shù)
        function smoothScroll() {
          // 獲取當(dāng)前滾動(dòng)的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 如果當(dāng)前不在頂部，則開(kāi)始滾動(dòng)動(dòng)畫
          if (currentScroll > top) {
            window.requestAnimationFrame(smoothScroll);
            window.scrollTo(0, currentScroll - (currentScroll / speed)); // 控制滾動(dòng)速度
          }
        }
      }