Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button

Question

Is it possible to take a user back to the area of a page where they scrolled down to when pressing the back button in a browser? As in --- pageA is double your screen size (hence you have to scroll to read more). You click a link on pageA to go to a new page - pageB. After reading you click back in browser. Now when you return to pageA you are back at the top and have to scroll down to where you were to continue reading the rest of the page.

Is there a Jquery or JS way to return to that point in the page. Maybe something with .scrollTop()?

Answer 1

If the content is loaded after page "load" event firing, then the back button would not take you back to the position you were. Because the browser scrolls before the 'load' event.

To make the browser remember the scroll position in this case, you have to store the scroll position and status (what content have been loaded) somewhere before navigating away. Either in the cookie, or in the url hash.

If pageA is just a static page without dynamic content (loaded after 'load' event, the browser should remember the scroll position when you go back.

For dynamic content, there at least includes two parts. One is recovering the page status when click "Back" button, so all the dynamic content is loaded, some expander are expanded or collapsed. The other is scroll to there.

The first part depends on how the page is implemented. The 2nd part you can put the scroll top into the cookie when page doing onUnload. For example

$(window).unload(function() {$.cookie('scrollTop',$(window).scrollTop());});

Answer 2

You can do this by using session storage.

$(window).scroll(function () {
  //set scroll position in session storage
  sessionStorage.scrollPos = $(window).scrollTop();
});
var init = function () {
   //return scroll position in session storage
   $(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;

Answer 3

You can use the following code to detect the scroll position.

 $(window).scroll(function (event){
    var scroll = $(window).scrollTop();
    // Do something
 });

Then store scroll in a session and when you click back do scrollTop(scroll) .

Answer 4

This should definitely be done using the History API since it is the only way of knowing for sure that the user went back to the page using the back button of the browser.

First of all, you want to prevent the default scroll restoration of the browser in order to handle it yourself. See this article for details.

if ('scrollRestoration' in history) history.scrollRestoration = 'manual'

Then you need to store the scroll position in the history.state when the user leaves the page. This can be done on beforeunload using history.replaceState.

window.addEventListener('beforeunload', storeScrollPositionInHistoryState)

function storeScrollPositionInHistoryState() {
  // Make sure to add lastScrollPosition to the current state
  // to avoid removing other properties
  const newState = { ...history.state, lastScrollPosition: scrollY }

  // Pass the current location.href since you only want to update
  // the state, not the url
  history.replaceState(newState, '', location.href)
}

or with ES5

function storeScrollPositionInHistoryState() {
  var newState = Object.assign({}, history.state, { lastScrollPosition: scrollY })
  history.replaceState(newState, '', location.href)
}

Finally, whenever your page is ready to scroll back to its previous position, you check if history.state.lastScrollPosition is defined and if it is the case, you restore the scroll position and remove it from the history.state.

function restoreLastScrollPositionIfAny() {
  if (typeof history.state.lastScrollPosition !== 'number') return

  scrollTo(scrollX, history.state.lastScrollPosition)
  const cleanState = { ...history.state }
  delete cleanState.lastScrollPosition
  history.replaceState(cleanState, '', location.href)
}

There are still one edge case that is not covered:

• The user might have resized the window after leaving the page which can result in an incorrect scroll position when going back to the page. Developers resize the window very often, but real users not that much. That's why I consider it as an edge case.

One way to solve it could be to also store the window size in the history.state and avoid restoring the scroll position if the current window size doesn't match the one stored in the state.

Hope it helps.

Answer 5

After trying @bowen option I have arrived to a better one with smooth scroll and without the problem said by @Frits

      $(window).scroll(function () {
        //set scroll position in session storage
        if ($(window).scrollTop() > 500)
          sessionStorage.scrollPos = $(window).scrollTop();
      });

      var init = setTimeout(function(){
         //return scroll position in session storage
         if (sessionStorage.scrollPos > 500){
            $("html").animate({ scrollTop: sessionStorage.scrollPos },2000);
          }
        },1000);
      window.onload = init;

Answer 6

  //For Angular
  //Save your scroll position once you scroll
  @HostListener('window:scroll', ['$event']) onScrollEvent($event){
    sessionStorage.scrollPos = window.scrollY
  } 

  //Scroll to the save value postion
  ngAfterViewInit(){
    window.scrollTo(0, sessionStorage.scrollPos)
  }