Whats the best way to accurately scroll to a DIV element with javascript/jquery -

so have page filled divs , on page load need have browser automatically scroll pre-designated div.

i'm semi-successfully doing this

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

the problem if page contains images above #mydiv, scroll not accurate. because images load, browser pushes content (including #mydiv) down (this safari).

solutions don't work me:

1) give images set width , height way browser knows ahead of time dimensions are , won't push content down load. doesn't work me because images all on internet , not hosted on own server don't know dimensions ahead of time (these user submitted photos)

2) run page scroll after page has loaded. non starter me because takes few seconds images load (many many images) , in time user start scroll browser window , jump #mydiv. becomes confusing , frustrating user.

what i'm hoping ideas/pointers/code other solutions? or .... out of luck i'm trying accomplish?

you handle animation instead of letting $.animate it. way, can continually check top of div scroll , keep scrolling until there. images load , position().top changes, you'll know still have further go. problem here if there before images loaded, jump out again.

// in pseudocode var myinterval = setinterval(function(){      // value of position().top     // check value against current scrolltop value     // if not equal or greater than, scroll little bit     // else clear myinterval }, 16); // play timer best effect