JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<body>
    
    <h1 id="top">How to make smooth scrolling.</h1>

<a href="#mysection1" rel="relativeanchor">Section 1</a>
<a href="#mysection2" rel="relativeanchor">Section 2</a>
<a href="#mysection3" rel="relativeanchor">Section 3</a>
<a href="#mysection4" rel="relativeanchor">Section 4</a>

<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>

<div id="mysection1">Section 1</div>
<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>
    


<div id="mysection2">Section 2</div>
<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>


<div id="mysection3">Section 3</div>
<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>

<div id="mysection4">Section 4</div>
<a href="#top" rel="relativeanchor">Go Back to Top</a>


</body>

CSS

body { background-color: #000; color: #fff; }
a { color: aqua; }

JavaScript

$(document).ready(function() {
	$('a[rel="relativeanchor"]').click(function(){
	    $('html, body').animate({
	        scrollTop: $( $.attr(this, 'href') ).offset().top
	    }, 2000);
	    return false;
	}); 
});