jQuery .scrollTop 無法正確滾動

Question

所以我有以下代碼：

$(document).ready(function(){
  if(window.location.hash) {
    $('body,html').animate({
      scrollTop: $(window.location.hash).offset().top
    }, 1000);

  }
})

我是在從 StackOverflow 獲取的代碼的幫助下構建的。 我在url#destination調用頁面，所以實際上它應該滾動到 ID 是頁面哈希的元素。 元素存在並且頁面向下滾動，但不是精確的元素偏移，而是更多一點。 它可能很好，但我希望它按預期工作。
所以我現在向您展示控制台結果：

>>>$("body").scrollTop()
>1155

>>>$("#aboutus").offset().top
>1672.890625

有人可以向我解釋一下嗎？ 因為我在這里什么都聽不懂。

Answer 1

嗯...它對我來說很好用。 也許問題是，正如用戶在評論中指出的那樣，元素尚未加載，因此您應該使用$(window).load() 。 但是，如果您使用它，您的代碼將無法正常工作，因為瀏覽器具有內置方法，即當 url 中存在哈希時，它會直接轉到其 id 為哈希的元素所在的任何位置。 發生這種情況是因為此操作是在 javascript 代碼中的 .load 事件檢測之前觸發的。 因此，如果您想確保代碼有效，請將元素的目標替換為其他屬性，例如：

$(window).on("load", function(){
  if(window.location.hash) {
    setTimeout(function(){
      $('body,html').animate({
        scrollTop: $('*[idt="'+(window.location.hash).replace("#", "")+'"]').offset().top
      }, 1000);
    }, 130)


  }
})

這應該完全確保動畫正常工作，因為沒有元素具有這樣的哈希值，並且 js 代碼以相同的方式管理。

Answer 2

它不滾動到最底部的原因是因為在執行scrollTop時您的最后一個元素尚未添加到 DOM 中。

使scrollTop異步以等待 DOM 完全呈現：

setTimeout(() => {
  element.scrollTop = element.scrollHeight;
}, 0);