$(document).scrollTop() always returns 0

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?

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

I hope this helps someone else!

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.

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.

Kamba-Bilola Ted

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

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.

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!

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.

fzyzcjy

By the way, it seems that you should use

$("body").scrollTop()

instead of

$(".some-class").scrollTop

This is why I am stuck.

来源：https://stackoverflow.com/questions/12788487/document-scrolltop-always-returns-0

标签

javascript

jquery

scrolltop