jQueryを使わずに滑らかに動くトップに戻るボタン

アニメーションの原理

JavaScript でアニメーションをさせます。少し古い記事になりますが以下の記事が大変参考になります。

参考：これでできる！ クロスブラウザJavaScript入門 第17回　アニメーションの基礎

ものすごく簡単に言うと「パラパラ漫画の要領でアニメーションさせる」です。jQuery の fadeIn などのアニメーションも基本これと同じパラパラ漫画実装です。

トップに戻るボタンの場合は、単位時間ごとに数ピクセル上にスクロールさせる動きを連続でさせれば OK ということになります。

ネイティブ JS でトップに戻るボタン

HTML

<a href="#" id="return-top">Top</a>

トップに戻るボタンの要素に id を付けておきます。ここでは return-top。

JavaScript

function topButton(elmId, duration) {

    //トップに戻るボタンの要素の取得
    var topButton = document.getElementById(elmId);

    topButton.addEventListener("click", function(e){

        //デフォルトの動作の制御
        e.preventDefault();

        var begin = new Date() - 0;
        var yOffset = window.pageYOffset;
        var timer= setInterval(function() {
            var current = new Date() - begin;
            if (current > duration) {
                clearInterval(timer);
                current = duration;
            }

            //スクロール位置を単位時間で変更する
            window.scrollTo(0, yOffset * (1 - current / duration)) 
        }, 10);
    }, false)

}

// 使用例 トップに戻るボタンの id とアニメーションにかかる時間をミリ秒で指定
topButton("return-top", 300)

基本は上記の紹介記事と変わらない実装ですが、アニメーションはスクロール位置をさせなければならないため変更しています。 current / duration は0から1までの変化量となるのでスクロール位置が0に近づくようにします。

CSS

何でも構いませんが一応載せてます。

#return-top {
    background-color: #d66262;
    border-radius: 50%;
    bottom: 10px;
    color: #fff;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    outline: 0;
    position: fixed;
    right: 10px;
    text-align: center;
    width: 50px;
}

注意点

大きな注意点は特にありませんが、jQuery のアニメーションで実装できる easing 関係、ease-in-out など、はこのままでは出来ません。基本直線的なリニアな動きのみです。実装したい場合は easing 関数関係のライブラリもいくつかあるのでそれを使って実装するか自作してください。

まとめ

トップに戻るボタンは「jQuery を使わなきゃ実装できない系」で言われてたりしますが、jQuery で出来ることは当然ですが全てネイティブな JavaScript で実現可能です。

jQuery を使ったほうが簡単にかけるし便利だというだけです。クロスブラウザ関係のバグチェックなんかも減りますし使ったほうが色々お得です。ただ jQuery なしでも実装できますよというお話でした。