使用javascript/jquery准确滚动到DIV元素的最佳方式是什么

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

我半成功地做到了这一点

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

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

不适合我的解决方案：

1） 为所有图像设置一个设置的宽度和高度，这样浏览器就可以提前知道图像的尺寸，并且在加载时不会向下推内容。这对我来说不起作用，因为这些图片都来自互联网上的所有地方，而不是托管在我自己的服务器上，所以我无法提前知道它们的尺寸（这些是用户提交的照片）

2） 在页面完全加载后运行页面滚动。这对我来说也是一个不好的开始，因为加载图像（许多图像）需要几秒钟，在这段时间内，用户将开始滚动浏览器窗口，然后它将突然跳到#mydiv。这会让用户感到非常困惑和沮丧

---

我希望的是其他解决方案的想法/指针/代码？还是我。。。。我想完成的事情运气不好吗？

你可以自己处理动画，而不是让

$.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

---

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

唯一合乎逻辑的解决方案是向页面添加加载时间，在加载图像之前不显示任何内容。使用库而不是

$（window）.load（函数（）

（因为window load将等待所有资源，包括页脚javascript文件）加载图像后进行检查，然后显示页面并滚动到所需的部分

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

您可以将#mydiv添加到页面的url示例：