CODEWITHSUNDEEP
jquery-mobilecordova
Ayeni Olusegun
Ayeni Olusegun

Reputation: 19

How do i automatically scroll a page when it loads in jQuery mobile

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.

Upvotes: 0

Views: 3278

Answers (2)

Jasper
Jasper

Reputation: 75993

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)

Upvotes: 4

Jack
Jack

Reputation: 10993

You can try creating a anchor tag and clicking it (you don't even need to attach it to the DOM, for example

var a = $('<a />').attr('href', '#myParticularDiv').click();

Upvotes: 0

Related Questions