JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="bottom">scroll to bottom</span>
<br />
<br />
<br />
<div id="scroll">
        <center><b>There's Plenty of Room at the Top, seriously?</b></center>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at enim dignissim, eleifend eros at, lobortis sem. Mauris vel erat felis. Proin quis convallis neque, quis molestie augue. Vestibulum aliquam elit sit amet venenatis eleifend. Donec dapibus mauris ac lorem mattis pulvinar. Curabitur cursus elit commodo tellus bibendum, ut euismod nisi luctus. Pellentesque id magna nunc. Nam luctus nisi sapien, ac porta sem ultrices vitae. Suspendisse aliquet eleifend nunc, in mattis tellus dapibus rutrum. Nullam a sem venenatis, suscipit lorem eu, facilisis leo. Nunc eget eleifend magna. Curabitur dictum dui in massa vestibulum sagittis. Mauris sodales neque at tincidunt feugiat. Curabitur iaculis purus nec tortor elementum pulvinar. Donec non mattis augue.</p>
    
    <p>Integer sit amet iaculis nulla. Cras vehicula nunc eu leo aliquet, et convallis erat aliquet. Aenean tempor faucibus justo, porta blandit felis semper at. Maecenas auctor nibh sit amet tellus consectetur, et varius velit iaculis. Phasellus convallis lacinia dapibus. Praesent tempus nunc elit, id volutpat tellus sagittis commodo. Vestibulum ultrices quam vel congue viverra. Integer varius diam quis tempor consequat. Integer pulvinar neque lorem, eu lobortis augue pharetra vel. Praesent ornare lacus quis nisi fermentum dignissim. Curabitur hendrerit augue eu interdum interdum.</p>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam a ex non dolor rutrum suscipit vitae sit amet nibh. Donec pulvinar odio non ultrices dignissim. Quisque in risus lobortis, accumsan ante et, pellentesque erat. Quisque ultricies tortor sed tortor venenatis posuere. Integer convallis nunc ut tellus sagittis, et...

CSS

#scroll {
    width: 300px;
    height: 300px;
    overflow-y: scroll;
}
#bottom, #top {
    font-size: 12px;
    cursor: pointer;
    min-width: 50px;
    padding: 5px;
    border: 2px solid #0099f9;
    border-radius: 5px;
}

JavaScript

$(function () {
    var height = 0;
    function scroll(height, ele) {
        this.stop().animate({ scrollTop: height }, 1000, function () {            
            var dir = height ? "top" : "bottom";
            $(ele).html("scroll to "+ dir).attr({ id: dir });
        });
    };
    var wtf = $('#scroll');
    $("#bottom, #top").click(function () {
        height = height < wtf[0].scrollHeight ? wtf[0].scrollHeight : 0;
        scroll.call(wtf, height, this);
    });
});