Scrollable div plugin

by shapeshifta

HTML

<div class="scrollable">
    <button class="up">hoch</button>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
        <li>test6</li>
        <li>test7</li>
        <li>test8</li>
        <li>test9</li>
        <li>test10</li>
        <li>test11</li>
        <li>test12</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <button class="down">runter</button>
</div>

<div class="scrollable">
    <button class="up">hoch</button>
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <button class="down">runter</button>
</div>

<div class="scrollable">
    <button class="up">hoch</button>
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
 ...

CSS

.scrollable ul {height:200px;overflow:hidden}

JavaScript

//todo: delegate?, get end of list to deactivate buttons?
(function($) {

    $.fn.scrollable = function(options) {

        //Set the default values
        var defaults = {
            scrollMe: 'ul',
            up: '.up',
            down: '.down'
        };

        var o = $.extend(defaults, options);

        return this.each(function() {
            //find necessary elements
            var el = $(this),
                scrollEl = el.find(o.scrollMe),
                scrollElHeight = scrollEl.height(),
                up = el.find(o.up),
                down = el.find(o.down);

            //show error, if scrollable Element not found    
            if (scrollEl == null) {
                $.error('Zu scrollendes Element nicht gefunden');
            }

            //add event listener
            $(up).add(down).each(function(i) {
                $(this).bind('click', {
                    index: i
                }, function(e) {
                    e.preventDefault();
                    //get scrolldirection by index in selection and animate it 
                    scrollEl.stop().animate({
                        scrollTop: ((e.data.index) ? '+=' : '-=') + scrollElHeight + 'px'
                    });
                });
            });

        });
    };


})(jQuery);

$('div.scrollable').scrollable();