访问另一页后保留浏览器滚动位置

时间:2013-03-18 20:22:38

标签: php javascript jquery ajax

我正在使用JS,JQuery和& PHP和尝试做的是解决无限滚动问题。问题是,如果您向下滚动页面并使用ajax加载更多页面,然后单击链接转到新页面,在使用浏览器时如何自动转到旧页面中的相同位置新页面上的后退按钮?

。使用ajax在滚动时加载新页面。

2 个答案:

答案 0 :(得分:0)

我提出的解决方案是在导航离开页面之前将每个页面与相关数据一起存储。

维护滚动位置需要以下信息:

  • 网页ID (页面独有)
  • 网页数据(所有网页都是html,请注意过期的数据)
  • 分页页码(仅当此页面为Feed时适用)
  • 当前X,Y滚动位置
  • 时间戳

加载下一页时,可以使用本地存储存储以前的信息。返回上一页时,在存储中查找PageID。如果存在,则抓住X或Y坐标并将页面移动到该位置。这需要一些战略思考,因为如果页面是一个延迟加载(无限滚动)类型的页面或提要,您需要已经准备好数据或准备根据页面的位置查找数据。 / p>

构建此系统最简单的方法是,如果您的整个网站都是基于javascript的,并且您正在使用HTML 5 History Api。防止整页重新加载可以帮助减轻服务器的负担。如果您担心保持最新的某些数据过期,您可以将页码发送到服务器并获取相应的数据以填写过期的内容。

答案 1 :(得分:-1)

你可以得到$(窗口).scrollTop();值,然后将其保存为php中的变量,名称为“pageTop”,并在DOM准备好后调用它:

$(window).load(function() {
    $(window).scrollTo(pageTop);
});

让我知道这是怎么回事。