JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="down">bottom</a> | 
<a href="#" id="up">top</a>
<div id="scBox" style="width:200px; height:300px; overflow:hidden; border:1px solid">
<div id="top">HOME</div>
<a href="#" id="">1</a><br /><br /><br /><br /><br /><br />
    
<a href="#" id="">2</a><br /><br /><br /><br /><br /><br />
    
<a href="#" id="">3</a><br /><br /><br /><br /><br /><br />
    
<a href="#top" id="bottom">top</a>
    
</div>

CSS

div #top{}
#bottom{font-size:25px;}

JavaScript

var intS = 10;

$('a[href*="#"]').click(function(event){
        event.preventDefault();
    /*
        var f = this.href;
        var p = f.split("#");
        var t = p[1];
        var to = $("#"+t).offset();
        var tt = to.top;
    */
    if($(this).attr("id") == "down"){
        intS = intS + 40;
    }else{
        intS = intS - 40;
    }
      
        //var firstChildOffset= $('#scBox a:first-child').offset().top;    
    var ls = $('#scBox a:last-child').offset().top;
        var fc = $('#scBox').first().offset().top;
        var bh = $('#scBox').height();
    
    if(bh > ls){
        $('a#down').hide(); 
    }else{
        $('a#down').show()
    }
    
    if(fc <= 24){
        $('a#up').hide(); 
    }else{
        $('a#up').show()
    }
    
    
    

    
        //alert($('a#bottom').offset().top);
        $('html, body #scBox').animate({scrollTop:intS},500);
    
        //alert($('#scBox').height());
        
    alert('height:'+bh+'/top:'+fc+'/last:'+ls);
        
    
    });