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