无限滚动返回到相同的位置

Posted 2023-05-09

【中文标题】无限滚动返回到相同的位置

【英文标题】：come to the same position on going back with infinite scrolling

【发布时间】：2013-07-02 16:59:13

【问题描述】：

我想实现一个功能，在单击后退按钮时，我会回到相同的位置。一个很好的例子可能是 http://www.jabong.com/men/clothing/mens-t-shirts/ 。在这里，如果您向下滚动并点击产品，然后从产品页面单击返回，您将到达该产品所在页面的相同位置。

此处显示的示例未在 url 中附加任何内容以记住位置。此外，它不使用 pushstate 或 history.js（不通过 ajax 加载）。

关于如何做到这一点的任何见解？

编辑：我使用无限滚动分页（如 pinterest），并且页面在向下滚动时不断加载。当我返回时，查询再次运行并重新加载页面。如果我之前在第 4 页，在返回后，页面直到第 4 页才加载，所以有一个中断，因此我无法到达那个位置。

所以我的问题是如何通过无限滚动来做到这一点？

【问题讨论】：

Jabong 在 url 中追加位置：jabong.com/…，15 是每个 item 上设置的 data-pos 属性的值。

【参考方案1】：

您可以使用history.replaceState 存储页面离开之前的滚动位置。当用户返回时，您可以检查history.state 中是否存在某些滚动位置，如果存在，则滚动到该位置。

要考虑的另一件事是，浏览器也可以在离开时保留页面（如果缓存策略允许）并在返回时恢复它，包括滚动位置。在这种情况下，返回时不会触发任何浏览器事件，除了pageshow 事件（检查浏览器支持），它将通过event.persisted 告诉您页面是否来自缓存。您可能想再次通过history.replaceState 收听该事件以从存储状态中清除滚动位置。

最后，您要考虑浏览器会自行恢复滚动，您可能需要通过history.scrollRestoration 禁用它（但请检查浏览器支持）

【参考方案2】：

如果您可以在您的应用程序中使用 JQuery。你可以试试WayPoint Plugin，它使用起来非常简单，从你的问题来看，我认为这就是你想要的。

这里是一个无限滚动的例子以及它是如何工作的：

http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

还可以查看这些使用各种其他插件进行无限滚动的教程，您可以使用最适合您需求的一个。

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

编辑：

如果您希望使用返回按钮无限滚动恢复用户离开的位置，这有点棘手，需要您做更多的工作以及数据的生成方式。请在此处查看类似的问题：

Is it possible to write an "Infinite Scroll" javascript that can handle the back button?

【参考方案3】：

我遇到了同样的问题，情况非常相似：网址上没有更改书签或参数。

这是我的解决方案，它有效：

1) 您可以使用window.history.go(-1) 或window.history.back()，与浏览器上的后退按钮相同，导航到上一页。

2) 当您使用此功能时，由于某种原因，它可能不会回到您上一页的位置（例如，您在页面底部选择了一张图片，它会重定向到下一页。当您单击“返回”时' 按钮，它会返回上一页的顶部）。在这种情况下，当应用重定向到下一页时（通常是onClick() 或onChange() 事件），您需要根据您的代码在会话或其他地方设置当前滚动Y 值var currentScrollYonSession = window.scrollY。当您单击“返回”按钮并且应用程序加载上一页时，首先检查 session 的 scrollY 值是否为空。如果为空，则按原样加载页面；否则，检索 scrollY 值，加载页面并将 scrollY 值设置为当前页面：window.scroll(0, currentScrollYonSession)。

【讨论】：

你说它有效。您测试过哪些浏览器，包括移动设备？

【参考方案4】：

我为我的应用想出了一个解决方案来实现这一点：

$(document).on('click', 'a', function() 
  var scrollpos = $(window).scrollTop(); 
  localStorage.setItem('scrollpos', scrollpos);
);

这使用 LocalStorage 来保存我们从页面顶部向下的像素数。

var scrollplan = function() 
  var foo = true
  if ((foo == true) && $('.box').length > 30) 
      var bar = localStorage.getItem('scrollpos')
      $("html, body").animate( scrollTop: bar, 500);
  
    $('.photosbtn').on('click', function()
      var foo = false
    );
  ;

初始页面加载有 30 张带有类框的照片。我的分页从单击带有 photosbtn 类的 btn 开始。