JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<div id="container">
  <div id="main_content">
     <div class="scroll-up">scroll up</div>
    <div class="scroll-down">scroll down</div>
    <p>This is the main content</p>
  </div>
</div>

CSS

#main_content{
 	position: relative; 
}

#container{
  height: 1000px;
}

JavaScript

$('.scroll-down').click(function() {
    $('#main_content').animate({ // smooth scroll
            scrollTop: $('#main_content').scrollTop() + 300
        });

    });

    $('.scroll-up').click(function() {

        $('#main_content').animate({ // smooth scroll
            scrollTop: $('#main_content').scrollTop() - 300
        });

    });