返回上一个滚动位置 - jquery移动页面设计

Back to last scrolled position - jquery mobile page design

本文关键字：移动 jquery 上一个 滚动 位置 返回      更新时间：2023-09-26

我有一个简单的单页架构。在第一页中，我加载了一些列表项。接下来，我滚动列表并说我到达了第 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 项的位置。我错过了什么？如何返回我离开滚动的上一页？

小提琴

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

当从一个

页面 1 导航到页面 2 时，获取页面 1 的滚动位置，当从页面 2 返回到页面 1 时，设置滚动位置。

从第 1 页到第 2 页

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

以及返回第 1 页时。然后在第 1 页中就绪功能

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

我对jquery移动不太了解，但是 正如您所说，您有两个页面，并且在导航回您想要的第一页之后，众所周知，我们无法存储任何数据页面。 一旦刷新或重新加载页面，所有内容都将再次重新初始化。 所以你只有一种方法来实现你的目标， 单击列表项时，获取其当前滚动位置，并将该位置作为查询字符串参数发送到另一个页面，并将其存储在其中一个变量中。不久之后，当用户单击"后退"按钮时，您必须再次将该变量作为查询字符串发送到第一页，并且在文档就绪事件中，您将拥有先前的滚动位置，您可以设置它。谢谢

相关文章：