CODEWITHSUNDEEP
javascriptjqueryscrolltop
jetlej
jetlej

Reputation: 3392

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

Upvotes: 74

Views: 80849

Answers (9)

jetlej
jetlej

Reputation: 3392

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

Upvotes: 118

chaosifier
chaosifier

Reputation: 2964

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

should work on modern browsers.

Upvotes: 1

Dawood Najam
Dawood Najam

Reputation: 503

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.

Upvotes: 6

Verri
Verri

Reputation: 1608

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.

Upvotes: 54

ch271828n
ch271828n

Reputation: 17567

By the way, it seems that you should use 

$("body").scrollTop()

instead of 

$(".some-class").scrollTop

This is why I am stuck.

Upvotes: 0

Hiral Patel
Hiral Patel

Reputation: 139

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.

Upvotes: 1

Steve Lockwood
Steve Lockwood

Reputation: 594

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.

Upvotes: 9

Vasyl Gutnyk
Vasyl Gutnyk

Reputation: 5039

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!

Upvotes: 2

Kamba-Bilola Ted
Kamba-Bilola Ted

Reputation: 197

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

Upvotes: 6

Related Questions