JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first" class="section"><button id="scroll-button" class="down" type="button">Click Me!</button></div>
<div id="second" class="section">Hi</div>

CSS

#scroll-button {
    background: white;
    color: black;
    padding:15px;
    position:fixed;
    top: 50px;
    left:50px;
}
#scroll-button.active {
    background: black;
    color: white;
}

#first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

#second {
    width: 100%;
    height: 1000px;
    background: #999;
}

JavaScript

$(window).scroll(function () {
				if ($(this).scrollTop() > 300) {
          // if scrolling more than 300px add classes active and up
          $('#scroll-button').addClass('active up').removeClass('down');          
				} else {
          // is no scroll or less than 300px, remove class active and add class down 
          $('#scroll-button').removeClass('active up').addClass('down');
				}
      });
      
       // is no scroll or less than 300px and #scroll-button.down is clicked, animate scrolling to the next element 
       $('.down').on('click', function() {
        $('html,body').animate({
            scrollTop: $("#second").offset().top},
            600);
            return false;    
      });
      
       // if scrolling more than 300px and #scroll-button.up button is clicked, animate scroll to the top of the page
       $('.up').on('click', function() {
        $('html, body').animate({
          scrollTop: 0
        }, 600);
        return false;
      });