JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<div class="content" id="content-0">content 1</div>
<div class="content" id="content-1">content 2</div>
<div class="content" id="content-2">content 3</div>
<div class="content" id="content-3">content 4</div>
<div class="content" id="content-4">content 5</div>

<div class="nav">
    <a id="prev" href="#">previous</a>
    <a id="next" href="#">next</a>

</div>

CSS

.content{
    height:500px;
    width:200px;
    
}
.nav{
    
    position:fixed;
    top:0;
    right:50px;
    height:20px;
}

JavaScript

var section = 0;
    var number = $('.content').length;
		$("#next").click(function(e){
		  e.preventDefault();
		 
		  if(section < number){
			section++;
		  }
		  TweenMax.to(window, 0.5, {scrollTo:{y:$("#content-" +    section).offset().top}});
		});

		$("#prev").click(function(e){
		  e.preventDefault();
		  if(section > 0){
			section--;
			TweenMax.to(window, 0.5, {scrollTo:{y:$("#content-" + section).offset().top}});
		  }
		  
		});