平滑滚动在处理后跳回页面顶部

Question

我有一个函数，使用带有平滑滚动的jquery，从页面顶部滚动到从URL哈希中拉出的锚点。

滚动效果很好，但完成后，页面会重置到顶部。

以下是如何实施：

 if (hash) { // if hash in the URL

    $('html, body')
      .animate({scrollTop:$(window.location.hash) 
        .offset().top - 200 }, 1000); 
  }

导致这种情况的原因是什么？

Answer 1

最可能的问题是图片和其他内容尚未加载，因此页面尚未收到最终尺寸。这样，初始滚动将在加载后指向错误的位置。

这种情况的一个好方法是在加载内容后执行滚动，因此您必须将代码包装在$(window).load方法中。

var hash = window.location.hash;
$(window).load(function(){
  if (hash) { // if hash in the URL

    $('html, body')
      .animate({scrollTop:$(window.location.hash) 
        .offset().top - 200 }, 1000); 
  }
});