scrollTop always returns 0

Question

I've tried using scrollTop as well as scrollTop() and it always returns 0. How can this be, I've tried it like this:

Template.myHome.events({
    "click .examine": function(event){
        event.preventDefault();

        varPos = event.clientY;
        var yPos = document.body.scrollTop;
        console.log("Y coords: " + yPos);
    }
});

as well as using the JQuery version on several div's within and including the body tag, again all giving me 0 or null.

All I simply want is to get the number of pixels traversed on the y-axis as the user scroll downs the page.

`document.body.scrollTop` should work. Can you post some code? — zxqx, Mar 25 '16 at 20:32
Does this answer your question? [document.body.scrollTop Firefox returns 0 : ONLY JS](https://stackoverflow.com/questions/28633221/document-body-scrolltop-firefox-returns-0-only-js) — Shayan, Dec 11 '19 at 20:44

Oriol · Accepted Answer · 2016-03-25T21:35:59.420

Depending on the implementation, the element that scrolls the document can be <html> or <body>.

CSSOM View introduces document.scrollingElement (see mailing thread), which returns the appropriate element:

document.scrollingElement.scrollTop;

Alternatively, you can use window.scrollY or window.pageYOffset. They are aliases and return the same value, but the latter has more browser support.

For browsers which don't support any of the above, you can check both of these:

document.documentElement.scrollTop;
document.body.scrollTop;

var scrollTests = document.getElementById('scrollTests');
var tests = [
  "document.body.scrollTop",
  "document.documentElement.scrollTop",
  "document.scrollingElement.scrollTop",
  "window.scrollY",
  "window.pageYOffset"
];
for(var i=0; i<tests.length; ++i) {
  var p = scrollTests.appendChild(document.createElement('p'));
  p.appendChild(document.createTextNode(tests[i] + ' = '));
  p.appendChild(document.createElement('span')).id = tests[i];
}
window.onscroll = function() {
  for(var i=0; i<tests.length; ++i) {
    try{ var val = eval(tests[i]); }
    catch(err) { val = '[Error]'; }
    document.getElementById(tests[i]).innerHTML = val;
  }
};

#scrollTests {
  position: fixed;
  top: 0;
}
body:after {
  content: '';
  display: block;
  height: 999999px;
}

<div id="scrollTests"></div>

I've tested in FF and `document.documentElement.scrollTop;` works but not in Chrome. — user94628, Mar 25 '16 at 20:44
@user94628 Chromium 51 needs `documentElement` instead of `body`, but if I remember correctly proviously it was `body`, so they might have changed it. Anyways, you should check both (use maximum, sum them, or whatever). — Oriol, Mar 25 '16 at 20:47
In the first instance, it always has given 0 but when navigating to other page and come back to the same screen, then it has given the correct value. — Sachin Kumaram, Aug 21 '18 at 20:09

Asons · Answer 2 · 2016-03-25T22:27:57.740

1

This cover both html and body element, cross browser (tested on Chrome/Canary, FF, Edge, IE11)

function getScrollTop() {
  alert(Math.max(document.body.scrollTop,document.documentElement.scrollTop));
}

Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>

<button onclick="getScrollTop();">Click me</button>

edited Mar 25 '16 at 22:27

answered Mar 25 '16 at 20:38

Asons

84,923
12
110
165

@user94628 I am using Chrome now and it works. Which version do you have? ... and did you refresh page as i updated my answer once – Asons Mar 25 '16 at 20:53
@user94628 Interesting ... I use that and it works for me – Asons Mar 25 '16 at 20:57
I think this might be an issue with using it in the Meteor framework. – user94628 Mar 25 '16 at 22:36
@user94628 So if you run my sample here at SO it works? – Asons Mar 25 '16 at 22:40
@user94628 How does the code look like that you run in Meteor? – Asons Mar 25 '16 at 22:41
I resolved this by instead using `event.pageY`, which gave the expected value correctly. Thanks for your help. – user94628 Mar 25 '16 at 23:01

Akhil Patkar · Answer 3 · 2018-07-17T12:23:56.413

function topScrollFunction() {
                if (document.documentMode || /Edge/.test(navigator.userAgent)){
                  $('body').css('height', 'auto'); 
                 window.scrollTo(0,0);
              }else {
                window.scrollTo(0,0);
              }
            }

Added a condition for edge browser.Since you dont wanna impact the other browsers with the height
You need to add $('body').css('height', 'auto'); and then check for document.body.scrollTop which will give you the correct scroll position value. Hope that helps.Hope this works for you. Happy Coding.

score 1 · Answer 4 · answered Jan 17 '20 at 04:41

1

You need to add following CSS to body tag

body {
height: auto !important;
}

then check for document.body.scrollTop which will give you the correct scroll value

answered Jan 17 '20 at 04:41

Sahil Ralkar

2,331
23
25

Oh yeah ! My body was `height: 100%;` and scrollTop was always 0. with `height: auto;`, now scrollTop returns a value ! I guess you shouldn't use the `!important`, but find the file setting the height instead to change it. – Random Jan 06 '21 at 21:42

score 0 · Answer 5 · answered Mar 25 '16 at 20:43

0

try

 $("html, body").scrollTop();

answered Mar 25 '16 at 20:43

koolhuman

1,581
15
25

scrollTop always returns 0

5 Answers5

Linked