JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

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").stop().animate({
            scrollTop: scrolled
        });
    });

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

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