$(document).scrollTop() always returns 0

Question

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?

Not an answer, but a side note...I usually use the jQuery waypoints plugin for things like this. http://getkickstrap.com/apps/waypoints-987090/ — Adam Grant, Oct 08 '12 at 19:53
I really don't want to use a script to replace an extremely basic javascript function. — jetlej, Oct 08 '12 at 19:55
It's working in [this jsfiddle](http://jsfiddle.net/TnDtj/) with Firefox — halex, Oct 08 '12 at 19:55
That's why this is so frustrating - there isn't much variation that can mess up this code. It's rock solid and yet doesn't work! — jetlej, Oct 08 '12 at 19:58
@jetlej some information on your environment may help. It seems that your code works for some (me included - Chrome on OS X). What OS/browser are you working with? — Whymarrh, Oct 08 '12 at 19:59
Try to make a minimal example. If you can't make it from bottom, try to remove all that you can remove from your page until you don't have the bug anymore. And of course debut to see what happens in the `var scro...` line. — Denys Séguret, Oct 08 '12 at 19:59
There are also other ways to detect distance from top, [seen here](http://stackoverflow.com/a/4601868/1267663). Just in case. — Whymarrh, Oct 08 '12 at 20:01
@Whymarrh - I'm also using Chrome on OSX. I've also tried this out in FF and Safari — jetlej, Oct 08 '12 at 20:06
@jetlej I hate to ask, but does your page have enough content to scroll? Maybe the distance from top *is* 0. — Whymarrh, Oct 08 '12 at 20:08
That's wierd. Above, @dystroy has a working version. [It works for me, and here's what I'm running.](http://supportdetails.com/export.csv?bt=Chrome&bv=22.0.1229.79&je=1&ce=1&cd=24&rs=1440%20x%20900&bs=1440%20x%20714&fv=11.4.402&fvf=11.4.402) — Whymarrh, Oct 08 '12 at 20:13
Yup I know. That fiddle works for me in Safari, but the exact function on my site returns 0 every time. — jetlej, Oct 08 '12 at 20:15
@jetlej: *"but the exact function on my site returns 0 every time"*. In this case your site doesn't provide the exact same environment for this function. Please provide either a link to your site, or a lot more code. — Zeta, Oct 08 '12 at 20:47

score 117 · Accepted Answer · edited Dec 24 '22 at 02:14

117

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

edited Dec 24 '22 at 02:14

starball

20,030
7
43
238

answered Oct 08 '12 at 21:46

jetlej

3,382
6
29
41

2

The easy solution to this problem is to set max-height on body and html instead of height. – jwaern Aug 24 '14 at 12:00
This is caused by a bug in Chrome that is due to be fixed very soon: https://code.google.com/p/chromium/issues/detail?id=157855 – Stuart P. Bentley Oct 08 '15 at 11:33
17

For those of us not using jQuery, my recommendation is to use `window.scrollY` instead. – Stuart P. Bentley Oct 08 '15 at 11:39
1

just a side note; I've found the `scrollTop()` to be inconsistent across browsers, and can be plauged with layout of the html. It seems your 100% height is probably because an element inside your `BODY` tag was scrolling, and not the `BODY` tag itself. So once you made your body full height, scrolling happened on that, which then made your `scrollTop` used. – Guy Park Nov 20 '17 at 23:04
what did you set it to? for me `body` is set to `height: auto` which i believe is also messing it up :/ – oldboy May 14 '18 at 02:30

Verri · Answer 2 · 2018-06-01T10:51:53.483

54

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.

edited Jun 01 '18 at 10:51

answered Sep 21 '17 at 09:43

Verri

1,580
19
22

2

is `document.scrollingElement.scrollTop` mobile friendly?! – oldboy May 14 '18 at 02:29
I don't know, now i'm using `documentElement` instead `scrollingElement` and it works ;) – Verri May 14 '18 at 12:20
i'm having such issues implementing this feature again. i've done it in the past successfully and now i'm running into so many complications. would you mind taking a look at [this question that i posted to SO](https://stackoverflow.com/questions/50323483/scrolling-progress-bar/50324136#50324136) to see if you can see anything wrong with what i'm doing? – oldboy May 14 '18 at 17:47

score 9 · Answer 3 · answered Mar 23 '17 at 13:26

9

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.

answered Mar 23 '17 at 13:26

Steve Lockwood

574
4
6

`html`'s scrolltop worked for me. Nothing else did, even `body`'s. I am also using Bootstrap 4, though, and I have no idea what it's doing to the page behind the scenes. – felwithe Mar 20 '19 at 17:44
OP is concerned about child elements rather than `html` or `body`/ – Vishal Kumar Sahu Mar 04 '21 at 17:22

score 6 · Answer 4 · edited Dec 04 '13 at 13:30

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

Dawood Najam · Answer 5 · 2019-04-12T16:19:09.140

6

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.

edited Apr 12 '19 at 16:19

answered Nov 16 '17 at 19:23

Dawood Najam

503
5
9

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – LW001 Nov 19 '17 at 11:28
The link is dead. – Andreas Baumgart Apr 06 '18 at 08:55
And the page is down again. – sp00n Apr 09 '19 at 22:27
@sp00n I'm going to remove the link. The necessary information of that page is already written here. – Dawood Najam Apr 12 '19 at 16:18

score 2 · Answer 6 · answered Nov 12 '16 at 19:52

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!

score 1 · Answer 7 · answered Sep 15 '17 at 18:54

1

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.

answered Sep 15 '17 at 18:54

Hiral Patel

129
1
3

Is that really a function? – Vishal Kumar Sahu Mar 04 '21 at 17:24

chaosifier · Answer 8 · 2020-05-11T07:00:44.703

1

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

should work on modern browsers.

edited May 11 '20 at 07:00

answered May 11 '20 at 05:39

chaosifier

2,666
25
39

score 0 · Answer 9 · edited Sep 30 '17 at 15:30

0

By the way, it seems that you should use

$("body").scrollTop()

instead of

$(".some-class").scrollTop

This is why I am stuck.

edited Sep 30 '17 at 15:30

marc_s

732,580
175
1,330
1,459

answered Jun 09 '17 at 11:33

ch271828n

15,854
5
53
88

$(document).scrollTop() always returns 0

9 Answers9

Linked