javascript - come to the same position on going back with infinite scrolling - Stack Overflow

admin管理员组

文章数量:1253951

I want to implement a functionality wherein on clicking the back button, i e back to the same position. A good example may be / . 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.

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

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.

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

I want to implement a functionality wherein on clicking the back button, i e back to the same position. A good example may be http://www.jabong./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.

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

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.

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

• javascript
• html
• http

Share Improve this question Follow edited Jul 4, 2013 at 16:40 user_2000 asked Jul 4, 2013 at 16:05 user_2000user_2000 1,11333 gold badges1515 silver badges2626 bronze badges 1

• Jabong appends the position in url : jabong./…, 15 is the value of data-pos attribute set on each item. – Rahul Sagore Commented Dec 21, 2015 at 10:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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 ing back, besides the pageshow event (check browser support) which will tell you via event.persisted whether 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.

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)

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

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

http://imakewebthings./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./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?

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

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.

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.

本文标签： javascriptcome to the same position on going back with infinite scrollingStack Overflow