こんにちは。フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、現在はReactJSなどの出現によって少し人気を落としていると思われるjQueryですが、開発は継続中で現在の最新バージョンは3.3.1（2018/03/27現在）となっています。

しかも、バージョンが３.0からは必要最低限の機能だけを使えるjquery.slimバージョンも公開されていて、SEOに重要と言われる表示速度の高速化に有効な手段となっています。

ちなみに、このslimバージョン。何が違うかというと、通常版にある以下２つが使えなくなっています。

ajax　・・・　そのままajax通信
effects　・・・　移動とか透明とかのエフェクト

正直なところ、現在私の開発ではメインJSは「vue」に置き換わってしまってますし、ajaxは「axios」なので、もうjquery自体を使わない方向に向かってはいます。だけど、やっぱりbootstrap（jquery必須）が使いたい場面が多いので、せめてjquery.slimバージョンに置き換えてみることにしました。

bootstrap（ver 4.0）でやってみたところ、嬉しいことにnavbarやcollapseなどはjquery.slimで動くようでしたが、一点だけどうしても使いたい機能を失っていることに気がつきました。

それが、

$.animate();

です。

これは、他のサイトでもよく実装されているクリックすると自動で一番上までスクロールしてくれるボタンなどに利用されてる便利な関数です。

でも、これは「effects」の機能なのでslim版には入っていません。
ということで、この部分だけはなんとかネイティブJavaScriptで実装することにしました。

以下は、vue.js版ですけど、moveToTop()を抜き出せばどんな環境でも動くと思います。

※ちなみにアロー関数を使ってるのでIEとかは微妙かもしれません。functionを使うことも考えましたけど、開発者としては、こうやって一刻も早くIEを駆逐したいんです（笑）

<html>
<body>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<div id="app">
    <div v-for="i in 100" v-text="i"></div>
    <button style="position:fixed;right:15px;bottom:15px;" class="btn btn-primary" @click="moveToTop(500)">上へ</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<script>

    new Vue({
        el: '#app',
        methods: {
            moveToTop(duration) {
                let interval = 10;
                let scrollX = window.scrollX;
                let scrollY = window.scrollY;
                let step = Math.ceil(scrollY / (duration / interval));
                let timer = setInterval(() => {

                    if(window.scrollY > 0) {

                        scrollY -= step;
                        window.scrollTo(scrollX, scrollY);

                    } else {

                        clearInterval(timer);

                    }

                }, interval);
            }
        }
    });

</script>
</body>
</html>

関数版はこちら。

moveToTop(duration) {
    let interval = 10;
    let scrollX = window.scrollX;
    let scrollY = window.scrollY;
    let step = Math.ceil(scrollY / (duration / interval));
    let timer = setInterval(() => {

        if(window.scrollY > 0) {

            scrollY -= step;
            window.scrollTo(scrollX, scrollY);

        } else {

            clearInterval(timer);

        }

    }, interval);
}