jQuery Mobile - Page jumps to top before transition

Question

Anyone had this issue where the page quickly jumps to the top before a transition (leaving the fixed-position header looking lost halfway down the page)?

On returning to the page, the page ends up at the top, but since I'm dealing with a long list, it would be preferable to have it stay where I left off on the previous page.

I'm using in-page divs instead of actual separate pages, if that's perhaps contributing to it.

Any tips appreciated!

Answer 1

Use $.mobile.defaultHomeScroll = 0.

From here: https://github.com/jquery/jquery-mobile/issues/2846

Answer 2

This is a known issue that may be refactored in jQuery Mobile 1.1. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.

If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.

I fix this by using iScroll for my scrolling regions. That way all the pages occupy 100% width/height of the viewport and no scrolling-to-the-top-before-transitions will occur.