目指せ脱jQuery！ということで、jQueryなしで「ページトップへ戻るボタン」を実装するコードを2種類ほどメモしておこうと思います。
処理の流れとしては、
- クリックイベントに処理を登録
- スクロール値を"ちょっとずつ"0に近づける処理をスクロール値が0になるまで繰り返す
- "ちょっとずつ"の部分を工夫するとeaseアニメーションっぽくする
ってな感じになります。
*ES2015の記述を用いている部分がありますのであらかじめご了承ください。
目次
完成コード
例として、HTML側はページトップへ戻るボタンにpagetopというID名が付与されてるとします。
HTML
<div id="pagetop"><!-- ボタン --></div>パターン2：linearアニメーション
単純にスクロール値を100ずつ引いていくと、ページトップまでlinearアニメーションしていきます。
DOM読み込み後に以下のスクリプトをコピペしましょう。
JS
const pageTopBtn = document.getElementById('pagetop');
pageTopBtn.addEventListener("click", function () {
const me = arguments.callee;
const nowY = window.pageYOffset;
window.scrollTo(0, nowY - 100);
if (nowY > 0) {
window.setTimeout(me, 10);
}
});パターン2：easeっぽくアニメーション
先ほどは単純な引き算で淡白なアニメーションでしたが、少し工夫してeaseアニメーションっぽくしてみました。
JS
const pageTopBtn = document.getElementById('pagetop');
pageTopBtn.addEventListener("click", function () {
const me = arguments.callee;
const nowY = window.pageYOffset;
window.scrollTo(0, Math.floor(nowY * 0.8));
if (nowY > 0) {
window.setTimeout(me, 10);
}
});5行目が変化しています。
現在のスクロール値を 10 msごとに0.8倍、つまり 4/5 に減少させています。
これにより、クリックしてすぐはスクロール値が激しく減少し、ページ上部に移動するほど減少の割合が緩やかになります。
nowY * 0.8の0.8という数値を任意に変化させることで、好きな速度でアニメーションさせることが可能です。
ポイント
このスクリプトの肝となる部分は、setTimeout関数で自分自身を呼び出していることです。
clickイベントに登録している関数を繰り返し呼び出しています。
紹介したコードでは、無名関数でも名前付きでも気にせずコピペできるようにarguments.calleeを使用していますが、名前付きの関数を使用する場合はその名前を使用することもできます。
例1
const pageTopBtn = document.getElementById('pagetop');
pageTopBtn.addEventListener("click", foo);
function foo() {
const nowY = window.pageYOffset;
window.scrollTo(0, Math.floor(nowY * 0.8));
if (nowY > 0) {
window.setTimeout(foo, 10);
}
}もしくは、
例2
const pageTopBtn = document.getElementById('pagetop');
pageTopBtn.addEventListener("click", function foo() {
const nowY = window.pageYOffset;
window.scrollTo(0, Math.floor(nowY * 0.8));
if (nowY > 0) {
window.setTimeout(foo, 10);
}
});のようにしても大丈夫です。
