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