このエントリーをはてなブックマークに追加

読了: 約 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();
};

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'