JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="items-thread">
    <li class="item-thread">1</li>
    <li class="item-thread">2</li>
    <li class="item-thread">3</li>
    <li class="item-thread">4</li>
    <li class="item-thread">5</li>
    <li class="item-thread">6</li>
    <li class="item-thread">7</li>
    <li class="item-thread">8</li>
    <li class="item-thread">9</li>
</ul>
<a href="#" class="more">more</a>
<a href="#" class="less">less</a>

CSS

.items-thread {height:40px; width:100px; border:1px solid #000; overflow:hidden;}

JavaScript

(function($){
 
   $.fn.extend({ 
         
        scroll_up_down: function(options) {
        
            var defaults = {
                associateScroller:           '.less',
                scrollTarget:                '.items-thread',
                scrollAmount:                40,
                callback:                     function() {}
            }
                 
            var options =  $.extend(defaults, options);
            var o = options;
            var scroll_amount =  0;
            var associate_scroller = o.associateScroller
            
           
            var $cm = this.click(function(e){
                
                // Set the varible.
                var object = $(this);
                var scroll_target = $(o.scrollTarget);
                
                scroll_amount += o.scrollAmount;
                console.log('more: ' + scroll_amount);
                scroll_target.animate({scrollTop:scroll_amount}, 500);
                
                
                    
                return false;
                
            });
            
            var $cm_2 = $(associate_scroller).click(function(e){
                
                // Set the varible.
                var scroll_target = $(o.scrollTarget);
                scroll_amount -= o.scrollAmount;
                console.log('less: ' + scroll_amount);
                scroll_target.animate({scrollTop:scroll_amount}, 500);
                
                
                return false;
            });
            
            

        }
    });
        
})(jQuery);


$('.more').scroll_up_down();