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

come to the same position on going back with infinite scrolling

提问by user_2000

I want to implement a functionality wherein on clicking the back button, i come back to the same position. A good example may be http://www.jabong.com/men/clothing/mens-t-shirts/. Here, if you scroll down and hit on a product, and click back from the product page, you reach the same position of the page where that product is.

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

The example shown here doesn't append anything in the url to remember the position. Also, it doesn't use pushstate or history.js (not loading through ajax).

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

Any insights into how I can do this?

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

EDIT: Im using infinite scrolling pagination (like pinterest), and the pages keep loading on scrolling down. When I go back, the query runs again and reloads the page. If I was on the 4th page before, after going back, the pages don't load until page 4 and so there's a break, thus I cant reach that position.

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

So my question is how do I do this with infinite scrolling?

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

回答by Prakash Chennupati

If you can use JQuery in your application. You can try WayPoint Pluginits very simple to use and from your question, I think that is what your looking for.

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

here is an example Infinite Scrolling and of how it functions:

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

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

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

Also take a look at these tutorials for infinite scrolling using various other plugins, you can use which ever one suits your needs the best.

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

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

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

EDIT:

编辑：

If your looking to restore the location where the user left off with infinite scroll using the back button, this is a little bit more tricky and requires some more work on your part and how your data is being generated. Please take a look at a similar question here:

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

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

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

回答by Winters

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

我遇到了同样的问题，情况非常相似：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.

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

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.scrollYon 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).

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

回答by Timmy Von Heiss

I came up with a solution for my app to achieve this:

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

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

This uses LocalStorage to save how many pixels we are down from the top of the page.

这使用 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
    });
  };

The initial page load has 30 photos with class boxes. My pagination begins by clicking a btn with class photosbtn.

初始页面加载有 30 张带有类框的照片。我的分页首先单击带有类 photobtn 的 btn。

回答by hkf

You can use history.replaceStateto store the scroll position just before the page is left. When the user comes back you can check if there is some scroll position present in history.state, and if, scroll to that position.

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

One more thing to consider is that browers can as well persist the page when leaving (if cache policy allows them) and restore it when returning, including scroll position. In that case no browser events will be fired when coming back, besides the pageshowevent (check browser support) which will tell you via event.persistedwhether the page is served from cache or not. You maybe want to listen to that event to clear the scroll position from the stored state, again via history.replaceState.

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

Finally, you want to consider that browsers do scroll restoration on their own and you probably need to disable it via history.scrollRestoration(but check browsers support)

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