'How to get and set the current web page scroll position?

How can I get and set the current web page scroll position?

I have a long form which needs to be refreshed based on user actions/input. When this happens, the page resets to the very top, which is annoying to the users, because they have to scroll back down to the point they were at.

If I could capture the current scroll position (in a hidden input) before the page reloads, I could then set it back after it reloads.

javascripthtml


Solution 1:[1]

You're looking for the document.documentElement.scrollTop property.

Solution 2:[2]

The currently accepted answer is incorrect - document.documentElement.scrollTop always returns 0 on Chrome. This is because WebKit uses body for keeping track of scrolling, whereas Firefox and IE use html.

To get the current position, you want:

document.documentElement.scrollTop || document.body.scrollTop

You can set the current position to 1000px down the page like so:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

Or, using jQuery (animate it while you're at it!):

$("html, body").animate({ scrollTop: "1000px" });

Solution 3:[3]

Update 2021: browsers inconsistencies regarding X/Y scroll amount seem to have disappeared, but I still use the solution in this answer whenever I need to.

There are some inconsistencies in how browsers expose the current window scrolling coordinates. Google Chrome on Mac and iOS seems to always return 0 when using document.documentElement.scrollTop or jQuery's $(window).scrollTop().

However, it works consistently with:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

Solution 4:[4]

I went with the HTML5 local storage solution... All my links call a function which sets this before changing window.location:

localStorage.topper = document.body.scrollTop;

and each page has this in the body's onLoad:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

Solution 5:[5]

this will give you the px value of scroll from top

document.documentElement.scrollTop

Solution 6:[6]

Nowadays it seems like the get is working with: window.scrollX and window.scrollY. This could be an alternative way to solve it.

Solution 7:[7]

Now you can also use window.scrollTo({ top: 0, behavior: 'smooth' }); instead of using that jQuery solution above for the animation. Here is the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SLaks
Solution 2 tobek
Solution 3
Solution 4 AXE Labs
Solution 5 Bhavik Khawale
Solution 6 JW Geertsma
Solution 7 vondo

Related Questions