CODEWITHSUNDEEP
jquerymobilejquery-mobile
Don H
Don H

Reputation: 901

jQuery Mobile - Page jumps to top before transition

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!

Upvotes: 5

Views: 7707

Answers (3)

Crashalot
Crashalot

Reputation: 34503

Use $.mobile.defaultHomeScroll = 0.

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

Upvotes: 6

Ben Clayton
Ben Clayton

Reputation: 82209

We've run into this a number of times. Our solution is to ensure all pages are exactly the height of the screen. If your content is longer then a screen, then it goes inside a scrollable DIV container. If you're targetting iOS 4 and below you'll need a library like iScroll to make the DIV scrollable as overflow: scroll (or auto) don't work properly. Once you do this you can smoothly transition between pages.

Upvotes: 2

Jasper
Jasper

Reputation: 75993

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.

Upvotes: 2

Related Questions