$(document).scrollTop() always returns 0
JavascriptJqueryScrolltopJavascript Problem Overview
I'm simply trying to do something once the scroll position of the page reaches a certain height. However scrollTop() is returning 0 or null no matter how far down I scroll. This is the help function I'm using to check the scrollTop() value:
$('body').click(function(){
var scrollPost = $(document).scrollTop();
alert(scrollPost);
});
I've tried attaching scrollTop() to $('body'), $('html') and of course $(window), but nothing changes.
Any ideas?
Javascript Solutions
Solution 1 - Javascript
For some reason, removing 'height: 100%' from my html and body tags fixed this issue.
I hope this helps someone else!
Solution 2 - Javascript
I had same problem with scroll = 0 in:
document.body.scrollTop
Next time use
document.scrollingElement.scrollTop
Edit 01.06.2018
If you using event then you got object which has document element in target or srcElement. 
Here is a table showing scroll operation on different browsers.
As you can see Firefox and IE doesn't have srcElement and IE 11 doesn't support scrollingElement.
Solution 3 - Javascript
My solution, after trying some of the above and which doesn't involve changing any CSS:
var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )
This works in up-to-date versions of Chrome, Firefox, IE and Edge.
Solution 4 - Javascript
I just have an add-on for those who might make the same mistake as I did. My code was as followed:
var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
This code will work on all browser except for webkits browser such as chrome and safari because the <html> tag always has a scrollTop value of zero or null.
The other browsers ignore it while webkit's browsers don't.
The simplest solutution is just to remove the html tag from your code et Voila:
var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
Solution 5 - Javascript
Removing height: 100%; from html and body tags can resolve the issue.
The reason is that you might have set 100% as value of height property of html and body elements. If you set the height property of html and body elements to 100%, they get height equal to document’s height.
Solution 6 - Javascript
had the same problem. scrollTop() works with some block not document or body. To make this method work u should add height and overflow style for your block:
#scrollParag {
height: 500px;
overflow-y: auto;
}
And then:
var scrolParag = document.getElementById('scrollParag');
alert(scrolParag.scrollTop); // works!
Solution 7 - Javascript
Scroll Top was always returning 0 for me as well. I was using it for bringing focus to the specific element on a page. I used another approach to do so.
document.getElementById("elementID").scrollIntoView();
Working well for me on mobile, tablet, and desktop.
Solution 8 - Javascript
var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop)
should work on modern browsers.
Solution 9 - Javascript
By the way, it seems that you should use
$("body").scrollTop()
instead of
$(".some-class").scrollTop
This is why I am stuck.