document.body.scrollTop Firefox returns 0 : ONLY J

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

Answer 1

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

Answer 2

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.

Answer 3

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 :)