0

I am wanting the scroll position of the document element in JavaScript, since I cannot use jQuery.

Question: What would be the JavaScript code for getting the document's vertical scroll position? I need to make it compatible as far back as IE 8 and all modern browsers.

UPDATE 1: I reviewed the 2 answers given as duplicates of this. The first one does address my problem though its not focusing on a cross-browser solution, but the second one is way off what I need. I need the vertical scroll position of document and not scrolling to the top of document. The second post talks about using a link or going step by step to top of document, which does not address my question.

UPDATE 2: Based on the answer provided by minitech, I came up with following functions to determine scroll positions that works across all modern browsers as well as upto IE 8. I tested this and it worked in Chrome, FireFox, Opera, Edge , IE 8, IE 9, IE 10 and IE 11.

function getScrollY() {
        return  window.scrollY || window.pageYOffset || document.body.scrollTop;
}

function getScrollX() {
    return window.scrollX || window.pageXOffset || document.body.scrollLeft;
}
Sunil
  • 20,653
  • 28
  • 112
  • 197
  • I believe is is just `document.scrollTop = 0;` – imtheman Sep 09 '15 at 21:56
  • I need the scrollPosition only, but I do not want to scroll to top. I think what you suggested will scroll the document to top. Right? – Sunil Sep 09 '15 at 21:57
  • You can see the answer in the following SO thread: http://stackoverflow.com/questions/10661896/are-there-alternatives-to-jquery-scrolltop – Saar Sep 09 '15 at 21:57
  • is `window.scrollY` cross-browser? – Sunil Sep 09 '15 at 21:57
  • @Sunil Yes, sorry. It would be `var scrollPosition = document.scrollTop;`. I read it too fast. :) – imtheman Sep 09 '15 at 21:58
  • @Sunil I think so. It's a basic. – akinuri Sep 09 '15 at 21:59
  • @imtheman, I tried your approach, but it gives `undefined`, but the jQuery version gives a value of 828. So it seems, scrollTop cannot be used. – Sunil Sep 09 '15 at 22:00
  • @akinuri, Even using document.scrollY gives 0 when the jQuery version gives 828. So it doesn't seem right. – Sunil Sep 09 '15 at 22:01
  • It seems IE8 doesn't support `scrollY` [IE8 alternative to window.scrollY?](http://stackoverflow.com/questions/16618785/ie8-alternative-to-window-scrolly). – akinuri Sep 09 '15 at 22:02
  • 1
    `document` isn't an element, so `document.scrollTop` will never work. However, as mentioned in both flagged duplicates, `document.body.scrollTop` will. – rnevius Sep 09 '15 at 22:03
  • @akinuri, I am using Google Chrome and it doesn't work in Chrome also, since I just tested before posting the comment. – Sunil Sep 09 '15 at 22:03
  • 1
    It's not `document.scrollY`. Try `window.scrollY`. – akinuri Sep 09 '15 at 22:04
  • @akinuri, Sorry my mistake. Yes, I just checked and it gives 828 which is same as the jQuery version. Thanks, – Sunil Sep 09 '15 at 22:06
  • Sorry? If you really `... am not interested in scrolling to top` then why did you ask `$(document).scrollTop() equivalent in JavaScript`? At 2.5k rep you should know how to state your question more clearly by now. – JK. Sep 09 '15 at 23:05
  • @JK, I asked `What would be the JavaScript code for getting the document's scroll position?`. But if you think otherwise then that's ok by me. – Sunil Sep 09 '15 at 23:11

1 Answers1

5

Use the source:

var scrollPosition = window.pageYOffset;

Compatibility notes:

  • document.body.scrollTop doesn’t work (is always 0) in Firefox; it’s document.documentElement.scrollTop if you want to use a scrollTop at all. Conversely, document.documentElement.scrollTop is always 0 in Chrome (well, Blink and WebKit).

  • window.scrollY doesn’t exist in IE 8 and earlier.

So, for old IE compatibility, use:

var scrollPosition =
    'pageYOffset' in window ?
        window.pageYOffset :
        document.body.scrollTop;
Ry-
  • 218,210
  • 55
  • 464
  • 476
  • Wow. this gives the exact value as the jQuery scrollTop. Will this work in all browsers? – Sunil Sep 09 '15 at 22:03
  • @Sunil: This will work in browsers jQuery 2.x supports, so IE 9 and later. If you need earlier versions, you can also check the source for jQuery 1.x (falls back on `document.body.scrollTop`, I believe). – Ry- Sep 09 '15 at 22:03
  • 1
    So I can just use `document.body.scrollTop`. Right? I just checked it also gives the same value as jQuery scrollTop in Chrome. – Sunil Sep 09 '15 at 22:04
  • 1
    @Sunil: No, that doesn’t work in Firefox. Try `var scollPosition = 'pageYOffset' in window ? window.pageYOffset : document.body.scrollTop;` if you need IE 8 and earlier compatibility. – Ry- Sep 09 '15 at 22:07
  • it's `document.documentElement.scrollTop` in std mode, `document.body.scrollTop` only works in quirksmode for IE and FF (it's a doctype thing, not an old IE thing). since the other will be a zero when inactive a "||" can seperate the two to read the scroll pos. – dandavis Sep 09 '15 at 22:12
  • @minitech, Ok. Great. I appreciate your excellent answer on this. To the point and simple. – Sunil Sep 09 '15 at 22:37