使用JavaScript/jQuery精确滚动到DIV元素的最佳方法是什么？

Question

我有一个页面，充满了DIV标签。在页面加载时，我需要浏览器自动滚动到预先指定的DIV。

我已经半成功地用以下方法实现了它：

$('html,body').animate({scrollTop:jQuery('#mydiv').position().top}, 'slow');

问题在于，如果页面包含#mydiv上方的图像，则滚动将不太准确。这是因为当图像加载时，浏览器会向下推内容（包括#mydiv）（在Safari中）。

对我无效的解决方法：

1）给所有图像设置固定的宽度和高度，这样浏览器就提前知道它们的尺寸，不会在加载时向下推内容。但这对我无效，因为这些图像来自互联网各地，而不是托管在我的服务器上，所以我事先不知道它们的尺寸（这些是用户提交的照片）。

2）在页面完全加载后运行页面滚动。这对我也不可行，因为图像需要几秒钟才能加载（有很多很多图像），在此期间用户将开始滚动他的浏览器窗口，然后它将突然跳到#mydiv。这对用户来说非常混乱和令人沮丧。

我希望得到任何想法/指针/其他解决方案的代码？还是我...无法实现我想要的目标？

- Mark

---

你可以在页面的URL后面添加#mydiv。 - loli

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - loli

Answer 1

你可以自己处理动画，而不是让$.animate来做。这样，你可以不断检查要滚动到的div的顶部，并保持滚动直到到达那里。随着图像的加载和position().top的变化，你会知道你仍然有更多的距离要走。问题在于，如果在所有图像加载完成之前就到达目的地，它会再次跳出。

// in pseudocode
var myInterval = setInterval(function(){ 
    // get the value of the position().top
    // check that value against the current scrollTop value
    // if not equal or greater than, scroll a little bit
    // else clear myInterval
}, 16); // play with the timer to get best effect

- swatkins

Answer 2

问题在于在图像加载之前，您无法知道其大小。

唯一的合理解决方案是在页面上添加加载时间，并在图像加载完成之前不显示任何内容。使用imagesLoaded库检查图像加载完成后，而不是使用$(window).load(function()（因为窗口加载将等待所有资产，包括页脚JavaScript文件），然后显示页面并滚动到所需部分。

此外，由于页面最初未显示，用户也无法开始滚动并感到困惑。

- karanmhatre