(function ($) { var vscrollid = 0; $.fn.vScroll = function (options) { var options = $.extend({}, { speed: 500, height: 300, upID: "#up-arrow", downID: "#bottom-arrow", cycle: true }, options); return this.each(function () { vscrollid++; obj = $(this); var newid = vscrollid; obj.css("overflow", "hidden"); obj.css("position", "relative"); obj.css("height", options.height + "px"); obj.children().each(function (intIndex) { $(this).addClass("vscroll-" + vscrollid + "-" + intIndex) }); var itemCount = 0; $(options.downID).click(function () { var nextCount = itemCount + 3; if ($('.vscroll-' + newid + '-' + nextCount).length) { var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight(); itemCount++; $("#vscroller-" + newid).animate({ top: "-=" + divH + "px" }, options.speed) } else { if (options.cycle) { itemCount = 0; $("#vscroller-" + newid).animate({ top: "0" + "px" }, options.speed) } } }); $(options.upID).click(function () { var prevCount = itemCount - 1; if ($('.vscroll-' + newid + '-' + prevCount).length) { itemCount--; var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight(); $("#vscroller-" + newid).animate({ top: "+=" + divH + "px" }, options.speed) } }); obj.children().wrapAll("<div style='position: relative; top: 0' id='vscroller-" + vscrollid + "'></div>") }) } })(jQuery);