<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var ele   = $('#scroll');
        var speed = 25, scroll = 5, scrolling;

        $('#scroll-up').mouseenter(function() {
            // Scroll the element up
            scrolling = window.setInterval(function() {
                ele.scrollTop( ele.scrollTop() - scroll );
            }, speed);
        });

        $('#scroll-down').mouseenter(function() {
            // Scroll the element down
            scrolling = window.setInterval(function() {
                ele.scrollTop( ele.scrollTop() + scroll );
            }, speed);
        });

        $('#scroll-up, #scroll-down').bind({
            click: function(e) {
                // Prevent the default click action
                e.preventDefault();
            },
            mouseleave: function() {
                if (scrolling) {
                    window.clearInterval(scrolling);
                    scrolling = false;
                }
            }
        });
    });
    </script>
    <style type="text/css">
    #scroll {
        width: 250px;
        height: 250px;
        overflow: hidden;
        padding: 4px;
        margin-bottom: 20px;
        float:left;
        border:1px solid #00CCCC;
    }
    #scroller{ float:left; width:40px; margin-top:0px; margin-left:5px; height:258px; border:1px solid #996600;}
    #scroll-up{ 
                background:url(images/up.png) no-repeat center ; 
                height:31px; 
                width:31px; 
                display:block; 
                text-transform:none;  
                color: #0066CC;
                float:left;             
                margin-top:0px;         
              }
    #scroll-down{ 
                    background:url(images/down.png) no-repeat center;
                    height:31px; 
                    width:31px; 
                    display:block; 
                    text-transform:none;  
                    color: #0066CC;
                    float:left;
                    margin-top:205px;           
                }
    </style>
    </head>
    <body>
    <div id="scroll">
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here             Content here and more content here Content here and more content here Content here and more content here Content here and more content here    Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
    </div>
        <div id="scroller">     
            <a href="#" id="scroll-up">Up</a>
            <a href="#" id="scroll-down">Down</a>
        </div>
    </body>
    </html>

This is my text scroller code. I want to acieve following.,
1. How to add small scrollbar between up and down button.
2. currently this scrolls text on mouse enter(hover) on anchor tag, How to scroll on mouse click
3. How to allow multiple instances of <div id="scroll"></div> with same id i.e. id="scroll"

My ideea in this case is to work with jquery ui and use the same class for all the divs you want to use scroll Jquery has already created this scroll element so all you have to do is modifie to your own needs hope this helps.
Good luck