JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<input type="button" id="btnScroll" value ="Scroll To Block 2"/>
</div>
<div id="block1"></div>
<div id="block2"></div>
<input type="button" id="btnTop" value ="Scroll Back to Top"/>

CSS

input[type="button"]{
    margin:5px 175px;;
}

#block1 {
    background-color: #29234C;
    height:600px;
    width: 100%;
    margin:0 0 20px 0;
}

#block2 {
    background-color: #3953AC;
    height:600px;
    width: 100%;
}

JavaScript

var btnScroll = document.getElementById('btnScroll');
var btnTop = document.getElementById('btnTop');

btnScroll.addEventListener("click", function() {
    document.getElementById("block2").scrollIntoView();
});

btnTop.addEventListener("click", function() {
    document.getElementById("main").scrollIntoView();
});