scrollTo gets overridden when using jQuery Mobile

Question

I am creating a mobile web app with jQuery Mobile and would like to hide the search bar above the visible area. So the user would need to pull the page down to see the search bar. I'm thinking the best way to do that is to define the search bar as usual then on page load manually set the scroll position, say down 55px. Here's my code:

$(document).ready( function() {
    $("html,body").scrollTop(55);
}

The problem is, I can see upon refreshing the page it is hidden from view, but once it has fully loaded it immediately jumps back to the top. jQuery Mobile is the culprit, as it doesn't occur with this simple JS Fiddle.

How can I stop JQM from overriding my set scrollTop, or do I need to implement it differently?

Answer 1

jQuery Mobile has a special scroll function $.mobile.silentScroll(). It scrolls without animation but at the same time it doesn't trigger scroll event.

You also need to wait until page is fully loaded into DOM before calling this function. You can bind it to pagebeforeshow or pageshow.

$(document).on("pagebeforeshow", "#page", function () {
    setTimeout(function () {
        $.mobile.silentScroll(100);
    }, 10);
});

Demo