JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <!--CLICK T1 AND T2 TO CHANGE POSITION-->
<div id="main">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
<div id="c6">c6</div>
<div id="c7">c7</div>
<div id="c8">c8</div>
<div id="c9">c9</div>

<div id="ctrl">
<div id="t1">t1</div>
<div id="t2">t2</div>
</div>
</div>
</body>

CSS

body{overflow-y:hidden;}
div{height: 300px; width: 50px;border:1px solid black;}
#ctrl{ position:fixed;top:0px;}
#ctrl > div {height: 50px; width: 100px;position: absolute;left: 50px; border: 1px solid green;}
div#t1{left:50px;}
div#t2{left:150px;}

JavaScript

document.getElementById("t1").addEventListener("click", scrollDown);
document.getElementById("t2").addEventListener("click", scrollUp);

function scrollDown(){
	$('html, body').animate({
		scrollTop: $("#c4").offset().top 
        //hardcoded id
        //replace with function to scroll to correct id
	}, 1);
}
function scrollUp(){
	$('html, body').animate({
		scrollTop: $("#c1").offset().top     
        //hardcoded id
        //replace with function to scroll to correct id
	}, 1);
}