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

Related searches

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.

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

Getting the current scroll position in Chrome using scrollTop() on , scrollTop = 1000;. Getting the scroll position of the document in px. var scrollLeft = window. window.addEventListener ("scroll", function () { // Your code goes here }); Now, to get the scroll position value we will use scrollY property which will return the distance from the top of the element. Run JavaScript code or call a function after n seconds. Validating phone numbers in JavaScript.

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

Get and set scroll position of an element, To set or get the scroll position of an element, you use the properties scrollTop and scrollLeft of the element. The scrollLeft and scrollTop properties return the number of pixels that the element's content is scrolled from its left and top edges. The top left corner of the element is (0, 0) . Use the properties scrollTop and scrollLeft to get or set the scroll position of an element: var el = document.querySelector('div'); // get scroll position in px console.log(el.scrollLeft, el.scrollTop); // set scroll position in px el.scrollLeft = 500; el.scrollTop = 1000; Getting the scroll position of the document in px.

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

How to Get and Set Scroll Position of an Element, DOCTYPE html>. < html >. < head >. < title >. Scrollbar position using JavaScript/ jQuery? Click to get current scrollbar position. </ button >. Not sure if this would work but my approach was to add a property to the master page and when the user clicks an item in the listview the scroll position would be saved as a property, and on page load the property would be retrieved and the scroll position set. Not really sure how to capture or set the scroll position or if this will even work.

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

Window.scrollY, The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number.

How to get the position of scrollbar using JavaScript, During page unload, get the scroll position and store it in local storage. Then during page load, check local storage and set that scroll position. Assuming you have a div element with id element. In case it's for the page, please change the selector :)

With no scroll its value is 0. element.scrollHeight - is the pixels of the whole div. element.clientHeight - is the pixels that you see in your browser. var a = element.scrollTop; will be the position. var b = element.scrollHeight - element.clientHeight; will be the maximum value for scrollTop. var c = a / b; will be the percent of scroll [from 0 to 1].

constcontainer=document.querySelector('. container')container.scrollTopcontainer.scrollLeft. Those properties are read/write, so you can also setthe scroll position: constcontainer=document.querySelector('. container')container.scrollTop=1000container.scrollLeft=1000.

Comments
  • Isn't an AJAX-driven form not a better way to prevent those effects (and of course provide a fallback in case XHR is unavailable)? Page reloads will have the page to jump to the top and back again, a quirk that can be annoying.
  • thanks, I found this: articles.sitepoint.com/article/javascript-from-scratch/6 and modified the getScrollingPosition() to store the values in hidden variables. Then in the html of the refreshed page I use <body onLoad="window.scrollTo(x,y), where x and y are those from the hidden values values!
  • I'm finding, on Chrome on Ubuntu at least, that document.documentElement.scrollTop is always returning 0. document.body.scrollTop, however, seems to work. One Firefox on Ubuntu, on the other hand, the reverse is true - you get 0 with body and the correct amount with documentElement. Any idea what gives?
  • This answer is not accurate as the scrollTop property doesn't work on all browsers. Check window.pageXOffset and window.pageYOffset for better results.
  • gyo's answer, suggesting window.pageYOffset is cleaner if you're using window.scrollBy() or window.scrollTo() methods.
  • I've noticed it too, is it a bug on Mac and iOS?
  • @AlexanderKim I think it might be related to how certain CSS rules (like overflow) are interpreted, and it has been reported to work if checking scrollTop on both the body and html elements. However, to avoid testing and debugging, I always rely on the safe and consistent pageXOffset/pageYOffset.
  • great thanks for the correct answer
  • It would be more elegant to use setItem() and getItem() of localStorage and instead back up the scroll position at each link click, store it once when leaving the page: window.addEventListener("beforeunload", function() { localStorage.setItem("scrolly", document.documentElement.scrollTop || document.body.scrollTop); });