JavaScript ページの先頭までアニメーションスクロールをする
ブログやホームページでよくある、クリックするとページの先頭（TOP）にスクロールするボタンを実装します。
JQueryを使用したサンプルが多いですが、ここではJQueryは使わずに実装します。
bodyのscrollTopを取得する方法がブラウザによって異なるので、アクセスされたブラウザで処理を分岐しています。
// to: スクロール先のy座標（ページの先頭の場合は0をセット）
// duration: スクロールする時間
function scrollTo (to, duration) {
var element;
if ('scrollingElement' in document) {
element = document.scrollingElement;
} else if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
element = document.body;
} else {
element = document.documentElement;
}
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(to, duration - 10); // 再帰で実行
}, 10);
}
window.addEventListener('load', function () {
// ボタンなどの要素のクリックイベントに作成したイベントを設定
document.getElementById('button').addEventListener('click', function () { scrollTo(0, 600); });
});作成したファンクションをボタンのクリックイベントに設定する処理について、IE8以下に対応する場合はattachEventの処理も追加する必要があります。詳しくはJavaScript イベントを設定・追加する方法で紹介しています。
最新のChromeで動作しないとき
Chromeのバージョンが61以上の場合は今までのようにdocument.bodyでは正しく取得できないようです。
最近の新しいブラウザであればdocument.scrollingElementが使えるので、これに対応しているブラウザであればdocument.scrollingElementを使用するようにします。