jQuery ScrollTo Plugin

Create the animate scrolling effect but as a jquery plugin

by Alvin Olavarrieta

HTML

<a id="top" name="top" href="#bottom">Bottom</a>

<a class="marginTop800" id="bottom">Top</a>

CSS

.marginTop800 {
    margin-top: 800px;
    display:block;
}

JavaScript

$.scrollTo = function (options) {
    var settings = $.extend({
        speed: 1000,
        easing: "swing",
        x: 0,
        y: 0
    }, options);

    $('html,body').animate({
        scrollLeft: !$.isEmptyObject(options.elem) ? options.elem.offset().left : options.x,
        scrollTop: !$.isEmptyObject(options.elem) ? options.elem.offset().top : options.y
    }, settings.speed, settings.easing);


}

$.fn.scrollTo = function (options, callback) {
    var settings = $.extend({
        speed: 1000,
        easing: "swing"
    }, options);

    var self = $(this)

    $('html,body').animate({
        scrollLeft: self.offset().left,
        scrollTop: self.offset().top
    }, settings.speed, settings.easing)
        .promise()
        .done(function () {
        if (typeof callback == 'function') {
            callback.call(this);
        }
    });
}



$('a[href^="#"]').click(function () {
    var element = $(this).attr('href');
    $.scrollTo({
        elem: $(element),
        speed: 2000
    });
});



$('#bottom').click(function () {
    $('#top').scrollTo({}, function () {
        alert('ppp');
    });
});