JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<center>
<div id="Scroll" class="hoverScroll">
Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here    
</div>
<a href="javascript:void(0)" onmouseover="scrollDiv('Scroll', 5)" onmouseout="clearTimeout(timer1)">To Top</a> 
<a href="javascript:void(0)" onmouseover="scrollDiv('Scroll', -5)" onmouseout="clearTimeout(timer1)">To Bottom</a>
</center>

CSS

.hoverScroll {
width: 200px; 
height: 100px; 
border: 1px solid #333; 
background: #FFFF99;
padding: 15px 10px;
overflow: hidden;
}

JavaScript

var timer1;
function scrollDiv(divId, depl) {
    var scroll_container = document.getElementById(divId);
    scroll_container.scrollTop -= depl;
    timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}