JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollup" id="up">UP</div> 
      
     <div id="scroller" class="scroller buttongroup">  
        blah blah<br>
        content blah<br>
        blah blah<br>
        content blah<br>  
        blah blah<br>
        content blah<br>
        blah blah<br>
        content blah<br>  
        blah blah<br>
        content blah<br>
        blah blah<br>
        content blah<br>  
        blah blah<br>
        content blah<br>
        blah blah<br>
        content blah<br>
    </div>

    <div class="scrolldwn" id="down">DOWN</div>

CSS

.scrollup { background-color:#09f;
                background-image:url(../gifs/up_arrow2.gif);
                background-position:center;
                background-repeat:no-repeat;
                color:#FFF;
                padding:5px;
                margin:1px;
                font-size:12px;
                font-weight:bold;
                height:15px;
                width:30px;                
                text-align:center;}
    
    .scrolldwn {background-color:#09f;
                background-image:url(../gifs/down_arrow2.gif);
                background-position:center;
                background-repeat:no-repeat;
                color:#FFF;
                padding:5px;
                margin:1px;
                font-size:12px;
                font-weight:bold;
                text-align:center;
                height:15px;
                width:30px; }
                
    .scroller {    height: 100px;
                overflow: hidden;
                font-size: 10px;
                background-color:D9DCF4;}

JavaScript

$(document).ready(function() {
        var timeoutId = 0;

    function scrollIt(amount){
    $('#scroller').scrollTop($('#scroller').scrollTop()+amount);
    }

    $('#down').mousedown(function() {
    timeoutId = setTimeout(scrollIt(5), 1000);
    }).bind('mouseleave', function() {
    clearTimeout(timeoutId);
    });

    $('#up').mousedown(function() {
    timeoutId = setTimeout(scrollIt(-5), 1000);
    }).bind('mouseleave', function() {
    clearTimeout(timeoutId);
    });
    });