jQuery Mobile - Jumps To Top After Window Load

Question

We use jQuery mobile for m.swisswebcams.ch. When I scroll down while the page is still loading, it seems to always jump up again on page load (i.e. window.onload).

How can this be fixed?

---

Steps to reproduce this issue:

1. Open m.swisswebcams.ch in your mobile browser
2. Scroll down immediately while the page is still loading
3. Wait until the page jumps to top by itself
4. (It does not always happen. So you might need to try again sometimes.)

---

Result

Opening website:

Scrolling down:

Automatically jumps to top (unwanted):

Answer 1

Well, this behavior is by default in jQuery Mobile (actual v. 1.4.5). From jQuery Mobile source code:

    // hide iOS browser chrome on load if hideUrlBar is true this is to try and do it as soon as possible
    if ( $.mobile.hideUrlBar ) {
        window.scrollTo( 0, 1 );
    }

and this is the silentScroll function referenced in the previous comments:

....
    // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
    silentScroll: function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            ypos = $.mobile.defaultHomeScroll;
        }

        // prevent scrollstart and scrollstop events
        $.event.special.scrollstart.enabled = false;

        setTimeout(function() {
            window.scrollTo( 0, ypos );
            $.mobile.document.trigger( "silentscroll", { x: 0, y: ypos });
        }, 20 );

        setTimeout(function() {
            $.event.special.scrollstart.enabled = true;
        }, 150 );
    },
...

This workaround is no longer valid since iOS 7, but was one of the most requested features to get in "full-screen mode" (see a lot of questions about that on SO).

This is actually the reference: iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? with a detailed explanation also for more recent versions of iOS.

Just guessing, maybe you didn't noticed this behavior because you have newer iOS versions, or you don't need to get fullscreen, as you are already doing a scroll by hand.

You can prevent the initial scroll top by overriding the JQM settings:

<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.mobile.ajaxEnabled = false;
        $.mobile.hideUrlBar = false; // <---- add this line
    });


    var GLOBAL = {
        language : 'de'
    };
</script>

Try it out and let me know if this solves your issue. In my tests, it worked.

EDIT: This annoying behavior has been fixed in the upcoming 1.5 version of JQM:

Reference: jQuery Mobile 1.5.0-alpha1 Changelog

Fixed page load to Prevent silentScroll if user has already scrolled (#3958, 0996492)