document.body.scrollTop Firefox returns 0 : ONLY JS

Question

Any alternatives in pure javascript?

The following works in opera, chrome and safari. Have not tested yet on explorer:

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

At page load should scroll down to div '.content':

var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
};

Solution 1

Try using this: document.documentElement.scrollTop. If I am correct document.body.scrollTop is deprecated.

Update

Seems like Chrome does not play along with the answer, to be safe use as suggested by @Nikolai Mavrenkov in the comments:

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

Now all browsers should be covered.

Solution 2

Instead of using IF conditions, there's easier way to get proper result by using something like this logical expression.

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

Both parts return zero by default so when your scroll is at zero position this will return zero as expected.

bodyScrollTop = 0 || 0 = 0

On page-scroll one of those parts will return zero and another will return some number greater than zero. Zeroed value evaluates to false and then logical OR || will take another value as result (ex. your expected scrollTop is 300).

Firefox-like browsers will see this expression as

bodyScrollTop = 300 || 0 = 300

and rest of browsers see

bodyScrollTop = 0 || 300 = 300

which again gives same and correct result.

In fact, it's all about something || nothing = something :)

Solution 3

The standard is document.documentElement and this is used by FF and IE.

WebKit uses document.body and couldn't use the standard because of complaints about backward compatibility if they changed to the standard, this post explains it nicely

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

There is a new property on document which WebKit now supports

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

so this will get you to the right element

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;

and there is a polyfill too

https://github.com/mathiasbynens/document.scrollingElement

Comments

[Al Ex Tsm]

Awsome. This solution works for Firefox so I will throw in an if condition when loading on firefox. Thanks

[DevWL]

This is exacly what I was looking for.

[Martyn Chamberlin]

I've confirmed that this fixes my issue as well.

[Nikolai Mavrenkov]

It doesn't work for Chrome. It's safer to use window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

[John_911]

Thank You for the explanation! Really helps people out, myself included

[Wh1T3h4Ck5]

@John_911 That's major purpose of StackOverflow ;)

[Michelangelo]

@NikolaiMavrenkov Thanks, I updated my answer. I thought Chrome should also be covered, but seems like they still won't comply with the others ;)

[Geradlus_RU]

I've plugged-in mentioned polyfill and replaced document.body.scroll* to document.scrollingElement.scroll* in my code and it works fine in Chrome 52 and Firefox 43 on OS X. Thanks Anthony

[Apoorva Shah]

@Michelangelo Not working in my site, don't know why.