JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="con">
  <div class="box"> content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
  </div>
  <div class="cat-nav">
      <a class="ca-top">down</a><a class="ca-bottom">up</a>
      </div>
</div>

CSS

.con {
	width: 300px;
	height: 300px;
	position: relative;
}
.box {
	width: 100%;
	max-height: 300px;
	background: #eee;
	overflow:hidden
}
.cat-nav {
	width: 100%;
	background: transparent;
	position: absolute;
	bottom: 0;
	left: 0;
    right: 0;
	text-align:center;
	color:#fff;
	cursor:pointer
}
.cat-nav a {
	width:50%;
	float:left;
	padding:10px 0;
	display:block
}
.cat-nav .ca-top {
	background:#d8aa22
}
.cat-nav .ca-bottom {
	background:#333
}

JavaScript

$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
        var div = $('.box');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        // count = 0;
        clearInterval(interval);
    });
})
;