Question

我有一个简单的单页架构。在第一页中我加载了一些列表项。接下来，我滚动列表并说我到达了第60项。然后我点击了该项目，它将我带到了第二页。

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#" class="ui-btn ui-btn-left" id="current">0</a>
        <h1>Header</h1>
        <a href="#" class="ui-btn ui-btn-right" id="total">0</a>
    </div>
    <div role="main" class="ui-content">
        <ul data-role="listview" id="list"></ul>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>Footer</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
        <a href="#home" class="ui-btn ui-btn-left">Back</a>
        <h1>Header</h1>
    </div>
    <div role="main" class="ui-content">
        Some page
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>Footer</h1>
    </div>
</div>

现在，当我在第二页中按下back按钮时，它会显示带有列表的第一页，但滚动位置为0.我希望它是第60个项目的位置。我错过了什么？如何回到上一页我滚动的页面？

JsFiddle

通过滚动来观察情况，然后按任意按钮，然后按下back按钮。

Answer 1

当从一个page1导航到page2时，获取page1的滚动位置，当从page2返回到page1时，设置滚动位置。

从第1页到第2页

var scrollPosition= $("div").scrollTop();

回到第1页时。然后在第1页准备好功能

$(document).ready(function(){  
$("div").scrollTop(scrollPosition); 

});

Answer 2

我不太了解jquery mobile，但正如你所说，你有两个页面，然后导航回你想要的第一页，因为我们都知道我们不能存储任何数据页面。一旦刷新或重新加载页面，一切都将重新初始化。因此，只有一种方法可以实现您的目标，即当您单击列表项时，获取其当前滚动位置并将该位置作为查询字符串参数发送到另一个页面并将其存储在一个变量中。用户单击“返回”按钮后不久，您必须再次将该变量作为查询字符串发送到第一页，在文档就绪事件中，您将具有上一个滚动位置，您可以设置该位置。感谢

回到最后滚动位置 - jquery移动页面设计

2 个答案: