JSFiddle - React, Tailwind, and code Playground

HTML

<button id="down">Down</button>
<span id="a">A</span>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="up">Up</button>
<span id="b">B</span>

JavaScript

$("#down").click(function () {
    $('html,body').animate({
        scrollTop: $("#b").offset().top
    });
});

$("#up").click(function () {
    $('html,body').animate({
        scrollTop: $("#a").offset().top
    });
})