Question

I want to automatically scroll to a particular div which is at the bottom of the page my [data-role="page"], but it’s not working. The scroll bar still remains at the top but I want it to scroll down when the page loads. Let me know if you need better explanation. Thanks in advance.

Answer 1

You can bind to the pageshow event and then use the $.mobile.silentScroll() method to scroll the desired element into view. Here is an example:

$(document).delegate('.ui-page', 'pageshow', function () {

    //get the offset of the element
    var offset = $(this).find('[some-element]').offset().top;

    //now scroll to the element
    setTimeout(function () {
        $.mobile.silentScroll(offset);
    }, 0);
});

Here is a demo: http://jsfiddle.net/JNSRn/

The setTimeout allows the scroll to run after everything else that has been queued to run actually runs.

You can change the .ui-page selector to an ID or class to only run this code on a specific page or on a specific set of pages, currently it will run the event handler when any jQuery Mobile pseudo-page is shown.

Docs for $.mobile.silentScroll(): http://jquerymobile.com/demos/1.1.1/docs/api/methods.html (Bottom of page)