JSFiddle - React, Tailwind, and code Playground

by smartcookie

HTML

<div class="scroll-down"></div>
<div class="scroll-up"></div>

<div id="stage">
   <div id="main_content">contents</div>
</div>

CSS

body {
   margin: 0;
   background-color: #F3EFE8;
   overflow:hidden;
}

 #stage { width: 100%; min-width:786px; }

 #main_content { 
    width: 100%;
    margin: 0 auto;
    margin-left: 200px;
    overflow-y: auto!important;
    max-height: 90%;
    position: absolute;
    top: 0;
    left: 0;
 }

.scroll-up, .scroll-down {
  width: 40px;
  height: 40px;
  position:  fixed;
  left: 100px;
}

.scroll-up { background-color: red; top:100px; }
.scroll-down { background-color: blue; top:200px; }

JavaScript

$(function(){
    $('.scroll-down').click(function () {
		$('#main_content').animate({
			top: parseInt($('#main_content').css("top")) + 50
     	}, 500);
 	});

 	$('.scroll-up').click(function () {
		$('#main_content').animate({
			top: parseInt($('#main_content').css("top")) - 50
		}, 500);
 	});
 });