Question

所以我有以下代码：

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

  }
})

我借助从StackOverflow获取的代码构建了它。我在url#destination调用页面，所以实际上它应该滚动到ID为页面Hash的元素。元素存在，页面向下滚动，但不是精确的元素偏移，而是更多。它可能会很好，但我希望它按照我的预期工作。
所以我现在向您展示控制台结果：

>>>$("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);

jQuery .scrollTop不能正确滚动

2 个答案: