JSFiddle - React, Tailwind, and code Playground

by Alin Guta

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'><div class='rightSection'></div></div>

CSS

.cover{
    width:200px;
    height:500px;
    background-color:#000000;
    float:right;
    overflow:auto;
}


.rightSection{
    width:100px;
    height:3000px;
    background-color:white;
    
}


.header{
    position:fixed;
}

JavaScript

var scrolled=0;

$(document).ready(function(){

    	
    $("#downClick").on("click" ,function(){
                scrolled=scrolled+300;
        
				$(".cover").animate({
				        scrollTop:  scrolled
				   });

			});

    
    $("#upClick").on("click" ,function(){
				scrolled=scrolled-300;
				
				$(".cover").animate({
				        scrollTop:  scrolled
				   });

			});


$(".clearValue").on("click" ,function(){
				scrolled=0;
		});


});