(function ($) { var vscrollid = 0; $.fn.vScroll = function (options) { var options = $.extend({}, { speed: 500, height: 10, upID: "#up-arrow", downID: "#bottom-arrow", cycle: false }, 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-" + intIndex) }); var itemCount = 0; var divHrel = 200; var pxprec = 0; $(options.downID).click(function () { var nextCount = itemCount + 1; if ($('.vscroll-' + nextCount).length) { if ( $('.vscroll-' + itemCount).outerHeight() >=400 && $('.vscroll-' + itemCount).outerHeight() >= pxprec ) { var divH = divHrel; pxprec += divHrel; if ( pxprec >= $('.vscroll-' + itemCount).outerHeight() ) { divH = $('.vscroll-' + itemCount).outerHeight() - pxprec + divHrel; pxprec = 0; } else { itemCount--; } } else { var divH = $('.vscroll-' + 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-' + prevCount).length) { if ( $('.vscroll-' + itemCount).outerHeight() >=400 && pxprec > 0 ) { var divH = pxprec; pxprec = 0; } else { itemCount--; var divH = $('.vscroll-' + itemCount).outerHeight(); } $("#vscroller-" + newid).animate({ top: "+=" + divH + "px" }, options.speed) } }); obj.children().wrapAll("<div style='position: relative; top: 0' id='vscroller-" + vscrollid + "'></div>") }) } })(jQuery);