12

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

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

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

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

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

4

4 回答 4

2

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

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

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

于 2019-11-06T21:33:41.550 回答
1

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

这是一个无限滚动示例及其功能：

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

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

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

编辑：

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

是否可以编写一个可以处理后退按钮的“无限滚动”javascript？

于 2013-07-04T17:58:34.143 回答
0

I got the same problem and the situation was pretty similar: no bookmark or parameters changed on the url.

Here is my solution and it works:

1) You can use window.history.go(-1) or window.history.back(), which is the same as back button on the browser, to navigate to previous page.

2) When you use this function, for some reason it might not be back to the position on your last page (eg. you select a picture on the bottom of page and it redirects to next page. When you click 'back' button, it goes back to the top of the previous page). In this case, you need to set the current scrollY value var currentScrollYonSession = window.scrollY on the session or other place, depending on your code, when the app redirects to the next page (normally it's onClick() or onChange() event). When you click the 'back' button and the app loads the previous page, firstly check the session that the scrollY value is null or not. If it's null, just load the page as it is; otherwise, retrieve the scrollY value, load the page and set the scrollY value to the current page: window.scroll(0, currentScrollYonSession).

于 2015-02-17T06:27:25.517 回答
0

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

$(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 开始。

于 2017-01-08T02:19:02.383 回答