JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#green" style="color:green;" onclick="sc(0)">green</a>
<a href="#blue" style="color:blue;" onclick="sc(1)">blue</a>
<a href="#red" style="color:red;" onclick="sc(2)">red</a>
<div class="green" ></div>
<div class="blue" ></div>
<div class="red" ></div>

CSS

.green,.red,.blue{
  height:200px;
  width:300px;
  background:green;
  margin-top:100px;
}
.red{
  background:red;
}
.blue{
  background:blue;
}

JavaScript

$(function(){
	
});

function sc(w){
	if(w===2){
  	$(".red").animate({"scrollTop": $(".red").scrollTop()},1000);
  }
  if(w===1){
  	$(".blue").animate({"scrollTop": $(".blue").scrollTop()},1000);
  }
  if(w===0){
  	$(".green").animate({"scrollTop": $(".green").scrollTop()},1000);
  }
}