在 jQuery 中滾動到元素的 4 種方法

1. 在 jQuery 中滾動到元素的先決條件
2. jQuery 滾動到元素 - 在文件視窗中滾動
3. jQuery Animate ScrollTop - 使用 animate 方法平滑滾動
4. jQuery ScrollTop 到內部連結 - 平滑滾動 jQuery
5. jQuery 滾動到容器內的元素
6. 要記住的提示
7. jQuery ScrollTop 的兩個快速快捷方式

我們展示了滾動到 jQuery 中不同用例的元素的簡單解決方案。我們使用 scrollTop() 和 offset() 方法，但我們還演示了一種使用 position() 的新方法。

你將看到如何使用 jQuery 動畫平滑滾動。最後，我們演示了兩個常用的快捷方式和一些避免錯誤的提示。

在 jQuery 中滾動到元素的先決條件

1. scrollTop()
2. offset()
3. position()

首先，讓我們看一下在 jQuery 中滾動到元素的方法。

scrollTop()

jQuery scrollTop() 方法允許我們獲取和設定任何元素的 scrollTop 屬性。scrollTop 屬性的值是元素內容當前垂直滾動的畫素數。

你可以在此處瞭解有關 scrollTop 屬性的更多資訊。

.scrollTop() - 獲取當前的 scrollTop 值

我們使用不帶任何引數的 scrollTop() 來返回元素當前 scrollTop 值的值。

console.log($('#container').scrollTop());

我們在控制檯中看到元素的 scrollTop 檢視的值。現在讓我們將元素滾動到不同的位置並再次記錄 scrollTop 屬性的值。

在這裡，我們看到控制檯記錄了一個不同的值。這個 get 表單中的 jQuery scrollTop() 方法是實現滾動效果的關鍵。

.scrollTop(val) - 設定新的 scrollTop 值

我們可以在 set 表單中的 jQuery scrollTop() 方法中傳遞我們想要（垂直）滾動到的值。

$('document.documentElement').scrollTop(0);

這會將主文件滾動到頂部，因為我們傳遞了值 0。我們將再次將此視為有用的捷徑。

我們將一些鍵值傳遞給 scrollTop() 的 set 形式，以實現我們的 jQuery 滾動到元素行為。

你可以這裡詳細瞭解 jQuery scrollTop() 函式。

offset() - 查詢元素的位置以幫助在 jQuery 中實現平滑滾動

jQuery offset() 方法讓我們確定文件中任何元素的當前位置。這個方法返回兩個屬性，top 和 left；這些是文件邊框的畫素數（即沒有邊距）。

console.log(`The position of the element w.r.t document is : ${
    $('#container').offset().top}`);

offset() 方法顯示元素相對於文件的頂部位置。

閱讀更多關於 jQuery offset() 方法的資訊這裡。

position() - 在 jQuery 中實現滾動到元素的另一種方法

position() 方法類似於 offset() 方法，但有一點不同——它返回元素相對於其最近父元素的位置。因此，當我們調整元素的相對位置時，例如，在 jQuery 中為 scrolltop 設定動畫，position() 方法很有用。

你可以在此連結中獲取有關 jQuery position() 方法的詳細資訊。

position() 返回元素的位置，包括它的邊距（這裡，它與 offset() 方法不同）。

// displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$('.filler:first').position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$('.filler:first').offset().top}`);

瞭解了基礎知識後，讓我們滾動到 jQuery 中不同用例的元素。

jQuery 滾動到元素 - 在文件視窗中滾動

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').offset().top);
});

1. #clickButton 是單擊以滾動到目標元素的按鈕。
2. #scrollToMe 是我們想要滾動到的元素。

讓我們分解程式碼：

我們使用 .on 方法將事件處理程式附加到我們的按鈕。觸發這個處理程式的事件是第一個引數，"click" 事件。

當使用者點選按鈕時，程式碼執行 .on 方法的第二個引數中的（匿名）回撥函式。

我們首先使用兩個選擇器引數中的任何一個選擇要滾動的整個文件 - document.documentElement，它是根元素，或者在本例中是 html 元素和 document.body 元素。

然後我們在這個元素上以它的 set 形式執行 scrollTop() 方法（見上文）。我們想要 scrolltop 到我們的目標元素 - 具有 #scrollToMe ID 的影象元素。

因此，我們首先使用 offset().top 方法找到從頁面頂部到此目標影象元素的畫素數 - 請記住，此方法會找到相對於文件的位置。

然後，我們將此值傳遞給附加到文件根/正文元素的 scrollTop() 方法。因此，整個網頁移動到目標影象元素，如上面的視訊演示所示。

因此，這種方法很容易實現 jQuery 滾動到元素的行為。

但是，老實說，這個即時滾動到目標元素看起來很無聊。讓我們新增更多程式碼來獲得漂亮的平滑滾動 jQuery 效果。

jQuery Animate ScrollTop - 使用 animate 方法平滑滾動

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).animate({scrollTop: $('#scrollToMe').offset().top}, 500)
});

程式碼與前面的方法類似。我們只在選定的根/主體元素上執行 animate() 方法。

第一個引數是一個物件，它具有我們想要動畫化的目標 CSS property:value 對。

在這裡，我們只想更改 scrollTop 屬性以到達我們的目標影象元素。因此，我們將頁面頂部的畫素數的值分配給影象。

我們可以通過影象元素上的 .offset().top 方法找到這一點，就像在前面的方法中一樣。

jQuery ScrollTop 到內部連結 - 平滑滾動 jQuery

我們還可以使用以下程式碼為任何內部連結建立一個可重用的 jQuery scrolltop 模組。

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500);
})

讓我們深入瞭解這裡的程式碼邏輯。 （請參閱 scrollToInternalLink.html、scrollToInternalLink.js 和 scrollToInternalLink.css 檔案。）

首先，我們使用 [href^="#"] jQuery 屬性選擇器選擇 a 標記。我們使用^ 符號，所以 jQuery 只選擇那些具有以 # 符號開頭的 href 屬性的 a 標記。

我們使用片段識別符號在內部連結到任何元素。這些是對內部連結的引用，我們總是在它們前面加上 # 符號。

因此，我們上面的 jQuery 選擇器選擇了頁面上的內部連結。

你可以在此處閱讀有關 HTML 內部連結的更多資訊。

然後我們呼叫 e.preventDefault() 方法來禁用重新載入頁面的 a 標記的預設行為。

現在，我們提取目標元素的 hash——這是對目標元素片段識別符號的引用。大多數現代 HTML 程式碼使用我們的目標元素的 id 屬性。

我們使用這個雜湊來選擇我們的目標元素。

其餘程式碼與上面的 jQuery animate to scroll to 程式碼相同。我們傳遞 animate() 方法並將 scrollTop 屬性設定為目標元素的 offset().top 值。

jQuery 滾動到容器內的元素

有時，我們的目標元素位於可滾動容器內。我們可以使用以下程式碼將 jQuery 定位到這樣的元素。

let container = $('#container');
let scrollToMe = $('#scrollToMe');

$('button').on('click', function() {
  container.animate(
      {
        scrollTop: scrollToMe.offset().top - container.offset().top +
            container.scrollTop()
      },
      500)
});

這裡，#container 是一個外部 div 元素，充當我們的容器。

#scrollToMe 是我們要滾動到的目標影象。它巢狀在外部 div 容器內。

此外，外部 div 容器還有其他巢狀的 div 和 p 元素。這個外部的 div 容器是可滾動的並且有一個垂直滾動條。

我們將 click 事件處理程式新增到觸發按鈕。回撥在容器元素上執行 animate 方法。

它將容器的 scrollTop 屬性設定為一個新值。我們使用以下公式計算這個新值。

scrollToMe.offset().top - container.offset().top + container.scrollTop()

1. scrollToMe.offset().top 是從文件頂部到目標影象元素的畫素數。
2. container.offset().top 是從頁面頂部到容器 div 元素頂部的畫素數。

但是，有一個小問題。容器 div 元素是可滾動的；如果它最初滾動，它已經向下移動了那麼多畫素。

因此，我們必須將 container.scrollTop() 的因素新增到我們傳遞給 scrollTop 方法的引數中。

要記住的提示

對於使用上述 jQuery 方法滾動到元素，我們有兩個重要提示。

專業提示 1：

offset 和 position 方法返回一個 float 值，如果你希望頁面上有很多縮放，則可能會導致錯誤。因此，你可以使用 parseInt 函式首先將返回值轉換為 int 值。

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').parseInt(offset().top));
});

專業提示 2：

animation() 也將緩動函式作為引數。此函式決定動畫的執行方式。

該函式的預設值為 swing，提供平滑均勻的動畫效果。所以，我們可以使用這個預設值來獲得平滑滾動的 jQuery 本身。

jQuery ScrollTop 的兩個快速快捷方式

最後，對於 jQuery 滾動到元素的兩個常見用例，我們有兩個快捷方式。

jQuery 滾動到文件頂部的快捷方式

如果你有一個包含大量內容的長網頁，你可能希望在底部提供一個"scroll to top" 連結以便於導航。

這種錨連結的快捷程式碼是：

// this code scrolls to the top of the document with a click on the anchor
// element

$('#top').on('click', function() {
  $(document.documentElement, document.body).animate({scrollTop: 0}, 500);
});

我們將 animate 函式的目標 scrollTop 值設定為 0 - 這會將我們滾動到頁面頂部。

將雜湊/片段識別符號新增到 jQuery 滾動到元素中的 URL

如果你想將目標元素的片段識別符號新增到位址列中的 URL，你只需在我們滾動到上面的錨連結程式碼中新增一行。

// this code adds the fragment identifier/hash of the target
// element to the URL

// this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500, function() {
    window.location.hash = targetHash;
  });
})

window.location.hash = targetHash 行是提供此功能的程式碼。

你可以看到在 URL 的末尾新增了元素雜湊/片段識別符號 scrollToMe。

請注意將此程式碼片段作為 animate 函式的回撥包含在內，以確保它在動畫之後執行 - 與 JavaScript 最佳實踐同步。