JSFiddle - React, Tailwind, and code Playground

by azizpunjani

HTML

<div id="menu"> 
    <a href="#one">One</a> - <a href="#two">Two</a> - <a href="#three">Three</a> - <a href="#four">Four</a> - <a href="#five">Five</a>
</div>
<div id="one">Header One</div>
<div id="two">Header Two</div>
<div id="three">Header Three</div>
<div id="four">Header Four</div>
<div id="five">Header Five</div>

CSS

div {
    height : 500px;
    border : 1px solid #000;
    padding-top: 20px; 
}




div#menu{
  border: none;   
  position: fixed; 
  height: 30px;
  top: 0px;
  padding: 0px; 
}

JavaScript

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),
        oset  = $(href).offset().top;
    $('html, body').stop().animate({
        scrollTop : oset
    }, 1000, function () {
        location.hash = href;
    });
});