JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv">

    <a href="#bottom" id="top">Click to scroll down</a>

    <div id="star">&star;</div>

    <a href="#top" id="bottom">Click to scroll up</a>

</div>

CSS

#myDiv {
  width: 500px;
  height: 250px;
  border: 1px solid black;
  overflow: scroll;
}

a {
  background: #ddd;
  color: #444;
  font-family: sans-serif;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  display: block;
}

#star {
  text-align: center;
  font-size: 100px;
  line-height: 500px;
  color: #ddd;
}

JavaScript

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('#myDiv').animate({
            scrollTop: target.offset().top
        }, 1000);
    }

});