這幾種方法幫你快速實現回到頁面頂部

初見雨夜發表於2022-04-24

背景介紹

當頁面內容很多的時候，使用者可能會一直往下滑動頁面。但是當他想返回頁面頂部進行其他操作時，他可能需要不斷滾動滑鼠滾輪，這就導致使用者體驗將很差。鑑於這種情況， “回到頂部”這一功能便出現了。

如今在我們瀏覽網站的時候，常常能遇見“回到頂部”這個按鈕。目前主流的回到頁面頂部分表現為兩種，一種是直接回到頁面的頂部，這種方式簡單粗暴；另外一種則是自動滾動間接回到頁面頂部，這樣一來視覺體驗上可能更好，但是使用者需要過幾秒才能看到頂部內容。

例如掘金，在滾動到一定高度時會出現“回到頂部”按鈕，點選後會直接回到頁面頂部，就是上文說到的第一種情況。

實現

動態顯示滾動按鈕

“回到頂部”並不是一直顯示的，而是滾動到一定值才出現的，因此應該在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>

相關文章