JQuery Mobile 过渡在长页面上停止工作

Question

我遇到了从长页面底部运行时不再发生页面转换的问题。

这是一个jsfiddle:http://jsfiddle.net/7WVHA/7/

如果您打开示例并单击黑色导航按钮，过渡将按预期运行。但是，如果您返回到长页面，滚动到底部并再次运行，则不再发生转换，并且会立即出现第二页。

任何帮助将不胜感激。

<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

这是 jQuery Mobile 在长页面上的默认行为，过渡动画被禁用。

您可以通过在 pagebeforechange 上滚动到页面顶部来解决此问题。

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

$.mobile.defaultHomeScroll默认情况下为 0，除非根据设备/平台隐藏网址栏。

Demo