JSFiddle - React, Tailwind, and code Playground

by VinĂ­cius Santana

HTML

<div id="header">
    <p>header</p>
</div>
<div id="docnav">
    <button id="up">Up</button>
    <div id="sidescroll">
        <div id="sidescrollbtn"></div>
    </div>
    <button id="down">Down</button><br><br>
    <button id="top">Go to Top</button><br><br>
</div>
<div id="maincontent">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>

<div id="footer">
    <p>Footer</p>
</div>

CSS

#header{width:100%;background:red;height:100px;}
#docnav{position:fixed;right:0,width:10%;background:red;right:8px;text-align:center;}
#sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;}
#sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;}
#maincontent{border:1px solid black;background-color:lightblue;height:1000px;width:500px;margin:0 0 100px 20px;}
#footer{height:100px;width:100%;background:red;position:fixed;bottom:0;}

JavaScript

// Bind events when DOM is ready
$(function() {
    $('#up').on('mousedown mouseup', _scrollUp);
    $('#down').on('mousedown mouseup', _scrollDown);
    $('#top').on('click', _scrollTop);    
});

var timer;

function _scrollUp(evt) {
    if (evt.type == 'mousedown') {
        timer = setInterval(function() {
            var offset = $(window).scrollTop();
            $(window).scrollTop(offset - 20);    
        }, 100);
    } else {
        clearInterval(timer);
    }
}
function _scrollDown(evt) {
    if (evt.type == 'mousedown') {
        timer = setInterval(function() {
            var offset = $(window).scrollTop();
            $(window).scrollTop(offset + 20);    
        }, 100);
    } else {
        clearInterval(timer);
    }
}
function _scrollTop() {
    $(window).scrollTop(0);
}