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

Keelykeen

if possible in pure css even better! – Keelykeen

Answer 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.

Tiffinytiffy

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

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

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

@Tiffinytiffy Not working in my site, don't know why. – Yuonneyup

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

Imitation

This is exacly what I was looking for. – Scherzando

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

@Radiothorium That's major purpose of StackOverflow ;) – Imitation

Answer 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

Weirick

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 – Rollerskate