JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="up" class="nav">Up</a>
<a href="#" id="down" class="nav">Down</a>
<div id="content">
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>Failure is not an option.</p>
<p>Problems look mighty small from 150 miles up.</p>
<p>I believe every human has a finite number of heartbeats. I don't intend to waste any of mine</p>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.</p>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>
<p>You know, being a test pilot isn't always the healthiest business in the world.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>Failure is not an option.</p>
<p>Problems look mighty small from 150 miles up.</p>
<p>I believe every human has a finite number of heartbeats. I don't intend to waste any of mine</p>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a...

CSS

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;    
  margin: 0;
  padding: 0;  
   overflow: hidden;
}

#content {
  margin-right: 75px;
  float: left;
}

.nav {
  display: block;
  height: 20px;
  padding: 10px 0;
  width: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  background: #FC0;
  z-index: 100;
}

#down {
  bottom: 0;
}

#up {
    top: 50px;
}
}

JavaScript

$(document).ready(function() {
    $('#up').click(function() {
        $('#content').animate({'marginTop': '-=50px'}, 'fast');
    });
    
    $('#down').click(function() {
        $('#content').animate({ "marginTop": "+=50px" }, "fast");
    });
});