CODEWITHSUNDEEP
javascripthtml
xyz
xyz

Reputation: 2139

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.

Upvotes: 199

Views: 339477

Answers (9)

Jyoti Duhan
Jyoti Duhan

Reputation: 1094

You can get the current scroll position with window.scrollY/scrollX, store it temporarily in browser storage and on refresh, access it to reset page scroll position.

Upvotes: 1

denfedweb
denfedweb

Reputation: 19

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

Upvotes: 1

gyo
gyo

Reputation: 1701

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

Upvotes: 66

vondo
vondo

Reputation: 1

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

Upvotes: -1

Jason Hoku Levien
Jason Hoku Levien

Reputation: 63

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

Upvotes: 4

Bhavik Khawale
Bhavik Khawale

Reputation: 17

this will give you the px value of scroll from top

document.documentElement.scrollTop

Upvotes: 0

tobek
tobek

Reputation: 4539

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

Upvotes: 198

AXE Labs
AXE Labs

Reputation: 4541

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

Upvotes: 5

SLaks
SLaks

Reputation: 887215

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

Upvotes: 193

Related Questions