【JavaScript】Zepto.jsで特定の位置までスクロールさせる

読了: 約 2 分

今やっているプロジェクトでLPなどの軽い所で使っていたzepto.js
ほぼjQueryでやっている事しかやってなかったので、特に気にしてなかったのですが、
表題の通りの事をやろうと思ったら少し手間だったのでメモしておきます。

Zepto.js

詳細は公式サイトからどうぞ
小さなJavaScript libraryです。
jQuery1.9のminifyされたファイルサイズが32kbでzeptoのminファイルが24kbなので25%小さいんですね。
なので幾つかjQueryからの処理がなかったりするのでその部分だけは自分で書き足さないといけないので、
下記のようなシンプルなスクロールでもjQueryのscrollTopメソッドの引数にid書くだけで良いのですが、
zeptoだと下記ような形です。

function scroll(selector, animate, viewOffset) {
    //第一引数にスクロールする位置  第二引数は速度
    $('body').scrollToBottom (3000, '800');
}

$('#attention').click(function(e) {
   e.preventDefault();
   scroll( $('#serviceLogin'), true, 30 );
});

$.fn.scrollToBottom = function(scrollHeight ,duration) {
    var $el = this;
    var el  = $el[0];
    var startPosition = el.scrollTop;
    var delta = scrollHeight  - startPosition;

    var startTime = Date.now();

    function scroll() {
        var fraction = Math.min(1, (Date.now() - startTime) / duration);

        el.scrollTop = delta * fraction + startPosition;

        if(fraction < 1) {
            setTimeout(scroll, 10);
        }
    }
    scroll();
};