jQuery Mobile page jumping to top when a collapsible is clicked

Question

I have a jQuery Mobile page with a panel navigation. The last two elements are collapsibles with further menu items. Expanding or collapsing these causes the page to jump to

Answer 1

This appears to be an open bug:
https://github.com/jquery/jquery-mobile/issues/7055
https://github.com/jquery/jquery-mobile/issues/6688

As a raw fix for now, a script like this can be placed after the reference to jQuery Mobile source:

$(function() {
    $.mobile.panel.prototype._positionPanel = function() {
        var self = this,
            panelInnerHeight = self._panelInner.outerHeight(),
            expand = panelInnerHeight > $.mobile.getScreenHeight();

        if ( expand || !self.options.positionFixed ) {
            if ( expand ) {
                self._unfixPanel();
                $.mobile.resetActivePageHeight( panelInnerHeight );
            }
          //window.scrollTo( 0, $.mobile.defaultHomeScroll );
        } else {
            self._fixPanel();
        }
    };
});

This will override the widget internal method (note the commented line) without the need of changing jQuery Mobile source code directly (which is not possible when the framework is loaded from CDN).

Here's a live example.

Answer 2

One suggestion use "javascript:void(0);" instead of "#" in href. You can check it this works. If your onclick fail for some reason to return false like an error at run time. This will save you.

Answer 3

Please add return false; as a final return in each onclick call.

For example:

onclick="ajax_content('impressum'); return false;"

And finally, instead of doing

return ajax_content('settings/profile_pic');

Just call ajax_content without return, add a return false after, and move your logic (what return is supposed to do) inside your ajax_content block.