$(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?

Answers:

Answer

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

I hope this helps someone else!

Answer

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.

Answer

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.

Answer

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

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.

Answer

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!
Answer

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.

Answer

By the way, it seems that you should use

$("body").scrollTop()

instead of

$(".some-class").scrollTop

This is why I am stuck.

Answer
var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop) 

should work on modern browsers.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.