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

我想实现一个功能，点击后退按钮，我回到原来的位置。一个很好的例子可能是。在这里，如果您向下滚动并点击某个产品，然后从产品页面上单击后退，您将到达该产品所在页面的相同位置

这里显示的示例没有在url中添加任何内容来记住位置。此外，它不使用pushstate或history.js（不通过ajax加载）

对我如何做到这一点有什么见解吗

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

---

所以我的问题是，如果可以在应用程序中使用JQuery，如何使用无限滚动来实现这一点。你可以试试它的使用非常简单，从你的问题来看，我认为这就是你想要的

下面是一个无限滚动的示例及其功能：

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

编辑：

如果您希望使用“后退”按钮恢复用户使用“无限滚动”停止的位置，这将有点棘手，需要您做更多的工作，以及如何生成数据。请看下面一个类似的问题：

---

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

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

1） 您可以使用

window.history.go（-1）

或

window.history.back（）

，这与浏览器上的“后退”按钮相同，以导航到上一页

---

2） 当您使用此功能时，由于某些原因，它可能不会返回到上一页的位置（例如，您在页面底部选择一张图片，它会重定向到下一页。当您单击“上一页”按钮时，它会返回到上一页的顶部）。在这种情况下，您需要设置当前的滚动值

var currentScrollYonSession=window。当应用程序重定向到下一页时（通常是
onClick（）
或
onChange（）
事件），根据您的代码，在会话或其他位置滚动。当您单击“后退”按钮，应用程序加载上一页时，首先检查会话的滚动值是否为空。如果为空，只需按原样加载页面；否则，检索滚动值，加载页面并将滚动值设置为当前页面：
窗口。滚动（0，currentScrollYonSession）
我为我的应用程序想出了一个解决方案来实现这一点：

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

这使用本地存储来保存从页面顶部向下的像素数

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。
您可以使用
history.replaceState
在页面离开之前存储滚动位置。当用户返回时，您可以检查
历史记录中是否存在某些滚动位置。状态
，如果存在，请滚动到该位置

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

最后，你要考虑浏览器自己做滚动恢复，你可能需要通过<代码>历史来禁用它。ScRelueRebug < /C>（但是检查浏览器支持）
你说它是有效的。您测试了哪些浏览器，包括移动浏览器？Jabong在url中附加位置：，15是每个项目上设置的数据pos属性的值。