JSFiddle - React, Tailwind, and code Playground
HTML
<div class="anchors">
<a href="#anchor1" class="scrollLink">Scroll to anchor 1</a>
<a href="#anchor2" class="scrollLink">Scroll to anchor 2</a>
<a href="#anchor3" class="scrollLink">Scroll to anchor 3</a>
<a href="#anchor4" class="scrollLink">Scroll to anchor 4</a>
<a href="#anchor5" class="scrollLink">Scroll to anchor 5</a>
</div>
<p id="anchor1"><strong>Anchor 1</strong> - Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum.</p>
<p>Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te.</p>
<p>Cu duo omnes invidunt, eos eu mucius fabellas.</p>
<p>Stet facilis ius te, quando voluptatibus eos in.</p>
<p>Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
<p>Eum facete intellegat ei, ut mazim melius usu.</p>
<p>Has elit simul primis ne, regione minimum id cum.</p>
<p>Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo.</p>
<p>Eum ad cibo legimus, vim ei quidam fastidii.</p>
<p>Quo debet vivendo ex. Qui ut admodum senserit partiendo.</p>
<p>Id adipiscing disputando eam, sea id magna pertinax concludaturque.</p>
<p>Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cu</p>
<p>m cu exerci mediocritatem. Malis legere at per, has brute putant</p>
<p>animal et, in consul utamur usu.</p>
<p>Te has amet modo perfecto, te eum mucius conclusionemque, mel</p>
<p>te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in</p>
<p>sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix,</p>
<p>vel nisl albucius gloriatur no.</p>
<p>Ea duo atqui incorrupte, sed rebum regione suscipit ex, mea ex dic</p>
<p>ant percipit referrentur. Dicat luptatum constituam vix ut. His vide</p>
<p>platonem omittantur id, vel quis vocent an. Ad pro inani zril omnesque.</p>
<p>Mollis forensibus sea an, vim habeo adipisci contentiones ad, tale autem gr</p>
<p id="anchor2"><strong>Anchor 2</strong>...
CSS
.anchors {
background-color: #DDD;
padding: 3px;
border: 3px solid #444;
position: fixed;
top: 5px;
right: 5px;
}
.anchors a {
display: block;
}
JavaScript
$(document).ready(function(){
$( "a.scrollLink" ).click(function( event ) {
event.preventDefault();
$("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
});
});