$(document).scrollTop() always returns 0

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.


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. Example Here is a table showing scroll operation on different browsers.

enter image description here

As you can see Firefox and IE doesn't have srcElement and IE 11 doesn't support scrollingElement.


For some reason, removing 'height: 100%' from my html and body tags fixed this issue.

I hope this helps someone else!


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