Smooth scrolling with Zepto.js

zepto.smoothScroll.js

function smoothScroll(el, to, duration) {
    if (duration < 0) {
        return;
    }
    var difference = to - $(window).scrollTop();
    var perTick = difference / duration * 10;
    this.scrollToTimerCache = setTimeout(function() {
        if (!isNaN(parseInt(perTick, 10))) {
            window.scrollTo(0, $(window).scrollTop() + perTick);
            smoothScroll(el, to, duration - 10);
        }
    }.bind(this), 10);
}
$('.scrollTo').on('click', function(e) {
    e.preventDefault();
    smoothScroll($(window), $($(e.currentTarget).attr('href')).offset().top, 200);
});

Works great.

Thank you for this! I have been looking all over for this precious code!

great !

thanks

Exactly what I needed.
Side note though is the el param never gets used.

Converted it to a plugin so that it is easier to use with elements. Has a default duration of 400 also

;(function ($) {
    
    var scrollToTimerCache,
        zeptoScroll = function (el, to, duration) {
            if (duration < 0) {
                return;
            }

            var difference = to - el.scrollTop();
            var perTick = difference / duration * 10;
            scrollToTimerCache = setTimeout(function () {
                if (!isNaN(parseInt(perTick, 10))) {
                    el.scrollTop(el.scrollTop() + perTick);
                    zeptoScroll(el, to, duration - 10);
                }
            }, 10);
        }

    $.fn.animateScroll = function (to, duration) {
        clearTimeout(scrollToTimerCache);
        zeptoScroll(this, to, duration | 400);
    }

})(Zepto)

$('.scrollTo').on('click', function(e) {
    e.preventDefault();
    $(window).animateScroll($($(e.currentTarget).attr('href')).offset().top, 200);
});

Enhanced code

Hello guys great work for all of you .
I did some changes to the main script to make it easier and more plug & play .
Check it and tell me your opinion.

Cheers :)

(function ($) {

'use strict';
$.fn.scrollTo = function (settings) {

    var me = this, // i just like using me that is all :)
            $els = $(me),
            $win = $(window),
            dataSettings,
            microTicker = 10;
    // defaults
    me.defaults = {
        filterAttr: 'href',
        duration: 1000,
        eventTrigger: 'click',
        adjustTop: 0,
        onFinish: function () {
        }
    };

    // the current options
    me.options = $.extend({}, me.defaults, settings, dataSettings);

    /// options is json object used internally instead of parameters more flexible
    me.smoothScroll = function (options) {

        var difference = options.scrollTo - ($win.scrollTop() + me.options.adjustTop),
                perTick = difference / options.duration * microTicker;

        this.smoothScrollTime = setTimeout(function () {

            if (isNaN(parseInt(perTick, microTicker))) {
                clearTimeout(this.smoothScrollTime);
                me.options.onFinish(options.triggerElement, options.scrolledElement);
                return;
            }

            window.scrollTo(0, $win.scrollTop() + perTick);
            options.duration -= microTicker;
            me.smoothScroll(options);
        }, microTicker);
    };

    $els.each(function () {
        $(this).on(me.options.eventTrigger, function (e) {
            e.preventDefault();

            var triggerElement = $(this),
                    scrolledElement = $(triggerElement.attr(me.options.filterAttr)),
                    scrollTo = scrolledElement.offset().top;

            me.smoothScroll({
                triggerElement: triggerElement,
                scrolledElement: scrolledElement,
                scrollTo: scrollTo,
                duration: me.options.duration
            });
        });
    });

};

})(window.Zepto);

// Simple Example according to href
$('.triggerElement').scrollTo();

// Advance Example
$('.triggerElement').scrollTo({
filterAttr: 'data-link',
eventTrigger: 'mouseover',
onFinish: function (triggerElement, scrolledElement) {
alert(triggerElement.attr('class') + '-----' + scrolledElement.attr('id'));
}
});