jQuery Mobile - scroll to specific div on pageload

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