How to retain scroll position between pages on views infinite scroll?

Now a days infinite scrolling becomes the most popular pager in websites. Basically it do append new content to the same page through ajax rather than redirecting to a new page. It is more user-friendly and it take less time to load new contents to the page when comparing to the conventional pagination. Because of the use of ajax it takes less bandwidth than ordinary pagination.

Drupal View has an infinite scroll plugin to set infinite scrolling as its pagination.

You can get it from here.
https://www.drupal.org/project/views_infinite_scroll. It's pretty easy to install and set this up.

The next question is how to retain the scroll position, if the user navigate to the next page and click the back button of browser?

Here we have a very useful tool comes in place 'Scroll frame'

According to its projects page
"scrollFrame will hijack the user's click for elements that match the query selector you pass in and instead of reloading the page it will append a modal-like iframe that sits on top of your view port and points to the element's href. It then uses HTML5 history APIs to make the back-button function as expected"

You can get the javascript library from here https://github.com/artsy/scroll-frame.

How to use it

Insert scroll-frame-head.js in all pages. You can either add in your themes info file or can insert it through hook etc.

Then insert scroll-frame.js into the pages where you have an infinite scrolling list that needs to retain scroll position. you can use hook_page_preprocess to achieve this.

Finally use the scrollFrame function to indicate what links should retain their scroll position when clicked. Add it in your themes script file or a custom module's script file.

scrollFrame('#my-infinite-scrolling-list a');

Hope this article helped :-)