JQuery Mobile transition stops working on a long page

Question

I have a problem navigating a page that no longer occurs when starting from the bottom of a long page.

Here is jsfiddle: http://jsfiddle.net/7WVHA/7/

If you open this example and click on the black navigation button, the transition will be performed as expected. However, if you return to a long page, scroll down and start it again, the transition no longer occurs, and the second page appears immediately.

Any help would be greatly appreciated.

<div data-role="page" id="long"> <div data-role="header" data-position="fixed" data-theme="a"> <h1>Long Page</h1> <a href="#short" data-transition="flip" data-role="button" data-theme="b">DO TRANSITION</a> </div> <div data-role="content" data-theme="a"> <div class="box">TEST BOX 1</div> <div class="box">TEST BOX 2</div> <div class="box">TEST BOX 3</div> <div class="box">TEST BOX 4</div> <div class="box">TEST BOX 5</div> <div class="box">TEST BOX 6</div> <div class="box">TEST BOX 7</div> </div> </div> <div data-role="page" id="short"> <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a"> <h1>Short Page</h1> <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a> </div> <div data-role="content" data-theme="a"> Short page </div> </div> 

Answer 1

This is the default behavior of jQuery Mobile on long pages, transient animation is disabled.

You can solve this problem by pagebeforechange to the top of the pagebeforechange page.

 $(document).on("pagebeforechange", function () { window.scrollTo(0, $.mobile.defaultHomeScroll); }); 

$.mobile.defaultHomeScroll by default is 0 if the url panel is not hidden depending on the device / platform.

Demo