JQuery: How to return to the exact same scroll position when going back to previous page

Question

I have a long list of items and when I clicked into each item and return to the main list, the scroll position was lost.

How can I return to the same exact scroll position using jQuery? Is there any easy way to do it?

$(document).ready(function() {

  $('.update-button').click(function (){
    sessionStorage.scrollPos = $(window).scrollTop();
    console.log(sessionStorage.scrollPos);
  });
});

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

Above is what my code looks like. I tried to log the position and sessionStorage.scrollPos was 0. I am pretty sure I scrolled the page to somewhere.

Help is greatly appreciated.

Answer 1

You need to store value of scroll position in sessionStorage (or any storage) and re use it again on page load.

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

Answer 2

Just modifying @Rayon Answer if it doesn't work someone.

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

You can replace the $("body") with the top most element in your HTML. I am using framework7 mobile applicaiton and I need to use $(".page-content") . It worked for me.

Answer 3

No easy solution, but on the click event where the redirect takes place, get the current scroll position using

var scroll = $(window).scrollTop();

Then store the value of the scroll variable into the localstorage (cookies if localstorage is not available).

Then on page load look for the scroll position from local storage if available and if so move to that position.

Answer 4

this work for readmore article or hide article, for get current position height of readmore clicked.

#note: you need toggle button readmore and hide

let readhide = document.querySelectorAll('.read-hide');
let readmore = document.querySelectorAll('.read-more');
readmore.forEach((more,key) => {
    let height, moreHeight;
    window.addEventListener('scroll', function(event){
        height = Math.floor(event.target.scrollingElement.scrollTop);
    });
    
    more.addEventListener('click', function(){
        moreHeight = height;
    });
    
    readhide[key].addEventListener('click', function(){
        window.scrollTo(0, moreHeight);
    });
});

Answer 5

    <a href="javascript:window.history.back()">Return Text </a>

Answer 6

Try This.

<button onclick="goBack()">Go Back</button>


function goBack() {
  window.history.go(-1);
}