scrollTop always returns 0

javascript jquery meteor

22,471

Solution 1

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>

Solution 2

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

Solution 3

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>

Solution 4

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.

View more solutions

22,471

Author by

user94628

Updated on January 17, 2020

Comments

user94628 over 4 years
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.
user94628 about 8 years

I've tested in FF and document.documentElement.scrollTop; works but not in Chrome.
Oriol about 8 years

@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).
Asons about 8 years

@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 about 8 years

@user94628 Interesting ... I use that and it works for me
user94628 about 8 years

I think this might be an issue with using it in the Meteor framework.
Asons about 8 years

@user94628 So if you run my sample here at SO it works?
Asons about 8 years

@user94628 How does the code look like that you run in Meteor?
user94628 about 8 years

I resolved this by instead using event.pageY, which gave the expected value correctly. Thanks for your help.
user94628 about 8 years

Thanks for advice, I resolved this using event.pageY
Sachin Kumaram almost 6 years

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.
Random over 3 years

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.