JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav>
	<a href="#">CLICK</a>
</nav>

<div id="box">BOX</div>

CSS

body {
  width:4000px;
}
#box {
	width:100px;
    height:100px;
	background-color:#F00;
	position:relative;
	top:0;
	left:3000px;
}

JavaScript

$('nav a').on("click", function () {

		$.scrollTo( '#box', 5000, {easing:'easeOutElastic', axis:'x'} ); 
      
	});