JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<div class="nav">
    <span class="link" rel="#products">Products</span>
     <span class="link" rel="#contactinfo">Contact info</span>
     <span class="link" rel="#about">About</span>

</div>

<div style="height:800px;"></div>
<div id="products">products</div>
<div style="height:800px;"></div>
<div id="contactinfo">contact</div>
<div style="height:800px;"></div>
<div id="about">about</div>
<div style="height:800px;"></div>

CSS

.nav {
    position:fixed;
}
span.link {
    text-decoration: underline;
    color: blue;
    cursor:pointer;
}

JavaScript

$(document).ready(function(){
   $('.link').on('click',function (e) {
       $('html, body').stop().animate({
            'scrollTop': $($(this).attr('rel')).offset().top
        }, 900, 'swing', function () {});
   });
});