$(document).scrollTop() always returns 0

Asked 8/10, 2012 at 19:50 Answered 11/5, 2020 at 5:39

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?

Mercie answered 8/10, 2012 at 19:50 Comment(14)

Not an answer, but a side note...I usually use the jQuery waypoints plugin for things like this. getkickstrap.com/apps/waypoints-987090 – Redevelop 8/10, 2012 at 19:53

I really don't want to use a script to replace an extremely basic javascript function. – Mercie 8/10, 2012 at 19:55

Your code works for me : jsfiddle.net/ZA7Uj – Megaphone 8/10, 2012 at 19:55

It's working in this jsfiddle with Firefox – Bookcraft 8/10, 2012 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! – Mercie 8/10, 2012 at 19:58

@Mercie 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? – Colliery 8/10, 2012 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. – Megaphone 8/10, 2012 at 19:59

There are also other ways to detect distance from top, seen here. Just in case. – Colliery 8/10, 2012 at 20:1

@Colliery - I'm also using Chrome on OSX. I've also tried this out in FF and Safari – Mercie 8/10, 2012 at 20:6

@Mercie I hate to ask, but does your page have enough content to scroll? Maybe the distance from top is 0. – Colliery 8/10, 2012 at 20:8

@Colliery - Yes it has enough :) – Mercie 8/10, 2012 at 20:10

That's wierd. Above, @dystroy has a working version. It works for me, and here's what I'm running. – Colliery 8/10, 2012 at 20:13

Yup I know. That fiddle works for me in Safari, but the exact function on my site returns 0 every time. – Mercie 8/10, 2012 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. – Munn 8/10, 2012 at 20:47

118

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

Mercie answered 8/10, 2012 at 21:46 Comment(6)

The easy solution to this problem is to set max-height on body and html instead of height. – Slumberous 24/8, 2014 at 12:0

This is caused by a bug in Chrome that is due to be fixed very soon: code.google.com/p/chromium/issues/detail?id=157855 – Phaedra 8/10, 2015 at 11:33

For those of us not using jQuery, my recommendation is to use window.scrollY instead. – Phaedra 8/10, 2015 at 11:39

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. – Druid 20/11, 2017 at 23:4

what did you set it to? for me body is set to height: auto which i believe is also messing it up :/ – Extravasate 14/5, 2018 at 2:30

"This is caused by a bug in Chrome that is due to be fixed very soon:" 2023 reporting in, still not fixed – Flasher 12/10, 2023 at 0:46

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.

Meenen answered 21/9, 2017 at 9:43 Comment(3)

is document.scrollingElement.scrollTop mobile friendly?! – Extravasate 14/5, 2018 at 2:29

I don't know, now i'm using documentElement instead scrollingElement and it works ;) – Meenen 14/5, 2018 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 to see if you can see anything wrong with what i'm doing? – Extravasate 14/5, 2018 at 17:47

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.

Audun answered 23/3, 2017 at 13:26 Comment(2)

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. – Ballon 20/3, 2019 at 17:44

OP is concerned about child elements rather than html or body/ – Aponte 4/3, 2021 at 17:22

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

Segalman answered 4/12, 2013 at 13:6 Comment(0)

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.

Iconography answered 16/11, 2017 at 19:23 Comment(4)

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Discontinuous 19/11, 2017 at 11:28

The link is dead. – Horwitz 6/4, 2018 at 8:55

And the page is down again. – Frustrate 9/4, 2019 at 22:27

@Frustrate I'm going to remove the link. The necessary information of that page is already written here. – Iconography 12/4, 2019 at 16:18

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!

Onus answered 12/11, 2016 at 19:52 Comment(0)

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.

Skirmish answered 15/9, 2017 at 18:54 Comment(1)

Is that really a function? – Aponte 4/3, 2021 at 17:24

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

should work on modern browsers.

Psychopathist answered 11/5, 2020 at 5:39 Comment(0)

By the way, it seems that you should use

$("body").scrollTop()

instead of

$(".some-class").scrollTop

This is why I am stuck.

Decant answered 9/6, 2017 at 11:33 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags