JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">
1
<button data-div="two">далее</button>
</div>
<div id="two">
2
<button data-div="three">далее</button>
</div>
<div id="three">
3
<button data-div="four">далее</button>
</div>
<div id="four">
4
<button data-div="one">главная</button>
</div>

CSS

div{min-height:100vh;color:white;position:relative;}
div:nth-child(2n){background:#444}
div:nth-child(2n+1){background:#333}
button{width:70px;position:absolute;left:50%;bottom:20px;margin-left:-35px;}

JavaScript

$("button").click(function (){
	var $div = $(this).data('div');
	$('html, body').animate({
		scrollTop: $('#'+$div).offset().top
	}, 1000);
});