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

Posted 2023-05-09

【中文标题】返回上一个滚动位置 - jquery 移动页面设计

【英文标题】：Back to last scrolled position - jquery mobile page design

【发布时间】：2015-01-25 17:11:38

【问题描述】：

我有一个简单的单页架构。在第一页中，我加载了一些列表项。接下来，我滚动列表并说我到达了第 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 按钮。

【问题讨论】：

它应该自己滚动到最后一个位置。尝试使用最新版本 1.4.5

@Omar 我不能。我正在使用使用 1.4.2 的 jquery 移动主题。除此之外的任何东西都破坏了设计。

【参考方案1】：

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

从第 1 页到第 2 页

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

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

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

);

【讨论】：

虽然我想要 jquery mobile 的原生内容，但我想什么都没有。您的解决方案现在有效。谢谢jsfiddle.net/pAgbT/19

【参考方案2】：

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

【讨论】：

这是多页模板。两个页面都设计在一个文件上，ajax 用于在两个页面之间导航。 demos.jquerymobile.com/1.4.5/pages

我在第一行说你哥们，我对 jquery mobile 不太了解，但是当你问这个问题并提到页面导航时，我刚刚给你一个方法来完成这个任务跨度>