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 a开发者_开发问答nnoying 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.

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" });

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

Update 2021: browsers inconsistencies with scrollTop seem to have disappeared.

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

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);
  }

this will give you the px value of scroll from top

document.documentElement.scrollTop

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

 var stop = true;
  addEventListener('drag', (event) => {
    if (event.clientY < 150) {
      stop = false;
      scroll(-1)
    }
    if (event.clientY > ($(window).height() - 150)) {
      stop = false;
      scroll(1)
    }
    if (document.body.getBoundingClientRect().y === 0){
      stop = true;
    }
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      stop = true;
    }
  });
  addEventListener('dragend', (event) => {
    stop = true;
  });

  var scroll = function (step) {
    var scrollY = $(window).scrollTop();
    $(window).scrollTop(scrollY + step);
    if (!stop) {
      setTimeout(function () { scroll(step) }, 20);
    }
  }

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