JSFiddle - React, Tailwind, and code Playground
by george_black
HTML
<div class='header'><button id='upClick'>Go Up</button> <button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button> </div>
<div class='cover'>fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd fdsfds fsd fdsf dsfsd <div class='rightSection'></div></div>
CSS
.cover{
width:200px;
height:250px;
background-color:#000000;
float:right;
overflow:auto;
color:white;
}
.rightSection{
width:100px;
height:250px;
background-color:white;
color:white;
}
.header{
position:fixed;
}
JavaScript
var scrolled=0;
$(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+50;
$(".cover").animate({
scrollTop: scrolled
});
});
$("#upClick").on("click" ,function(){
scrolled=scrolled-50;
$(".cover").animate({
scrollTop: scrolled
});
});
$(".clearValue").on("click" ,function(){
scrolled=0;
});
});