javascript - 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 代码以相同的方式管理。