jQuery Mobile - scroll to specific div on pageload - jquery-mobile

Question

I would like to automatically scroll to a particular div when the page loads. However, I seem to get into some conflict with JQM's scroll to top functionality.
I am using the following code:
$.mobile.silentScroll($("#myElementId").offset().top);
which does not scroll correctly when wrapped like this:
$('[data-role=page]').bind("pageshow", function() {
$.mobile.silentScroll($("#myElementId").offset().top);
});
but works correctly with a little timeout like this:
$('[data-role=page]').bind("pageshow", function() {
setTimeout(function(){$.mobile.silentScroll($("#myElementId").offset().top);},100);
});
the problem with the last piece of code is that it causes a flicker, with a jump to the top and then a jump down the page. Any ideas how to avoid this?

Answer 1

Your setTimeout works because the jQuery Mobile framework remembers where you were scrolled-to if you are returning to a page you've been to before and you have to wait for their scroll to complete before running your own. You can essentially disable this feature by changing the minScrollBack option inside the mobileinit event handler to something really big:
<script src="[jQuery Core]"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.minScrollBack = 90000;
});
</script>
<script src="[jQuery Mobile]"></script>
That should disable the auto-scroll that the jQuery Mobile framework does when you visit a page on a subsequent visit.
Docs: http://jquerymobile.com/demos/1.0.1/docs/api/globalconfig.html

Answer 2

First post on StackOverflow!
Thanks for this, I have been working on a project that uses quite a bit of custom animation for the transitions and while it took a while to get here, Jasper's answer set me in the right direction, it was just missing a bit of code:
<script src="[jQuery]"></script>
<script>
$(document).bind("mobileinit", function(){
$.extend($.mobile, {
minScrollBack: 90000 // turn off scrolling to position on last page
});
});
</script>
<script src="[jQuery mobile]"></script>
This seemed to do the trick!
Ref: http://jquerymobile.com/test/docs/api/globalconfig.html

Answer 3

You guys ever tried the answer???
It does not work unless you set $.mobile.defaultHomeScroll to your wanted scroll as well.
That is, two steps.
1. set $.mobile.minScrollBack to a large enough value.
2. at page load, set the defaultHomeScroll to desired value.
Then it works.

Answer 4

I did not have to do much ... I got it working with the following on the section.
<script>$(function() {$.mobile.defaultHomeScroll = $(window).scrollTop();});</script>