Question

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

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

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

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

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

Answer 1

如果您可以在您的应用程序中使用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?

Answer 2

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

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

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

2）当您使用此功能时，由于某种原因，它可能不会回到您最后一页上的位置（例如，您选择了页面底部的图片，它会重定向到下一页。当您点击'返回'时'按钮，它会回到上一页的顶部）。在这种情况下，您需要在会话或其他位置设置当前的滚动值var currentScrollYonSession = window.scrollY，具体取决于您的代码，当应用重定向到下一页时（通常是onClick()或{{1} }事件）。当您单击“后退”按钮并且应用程序加载上一页时，首先检查会话中scrollY值是否为null。如果它为null，只需按原样加载页面;否则，检索scrollY值，加载页面并将scrollY值设置为当前页面：onChange()。

Answer 3

我为我的应用程序想出了一个解决方案来实现这个目标：

$(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张带有类框的照片。我的分页开始于单击带有类照片的btn。

Answer 4

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

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

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

无限滚动回到同一个位置

4 个答案: