JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<ul class="nav">
          <li id="nav-project"><a href="#section-1">Projects</a></li>
          <li id="nav-about"><a href="#section-2">about</a></li>
          <li id="nav-service"><a href="#section-3">service</a></li>
          <li id="nav-contact"><a href="#section-4">contact</a></li>
        </ul>
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
<div id="section-4"></div>
<script type="text/javascript" src="http://www.mekabrand.com/js/jquery.easing.1.3.js"></script>

CSS

.nav {
    display:block;
    width: 100%;
}

.nav li {
    display:inline;
    margin-right: 10px;
}

#section-1 {height: 300px;}
#section-2 {height: 300px;}
#section-3 {height: 300px;}
#section-4 {height: 300px;}

JavaScript

$(document).ready(function() {
    $(function() {
        $('ul.nav a').bind('click',function(event){
            var $anchor = $(this);
            $('html, body').stop().animate({
              scrollTop: $($anchor.attr('href')).offset().top
            }, 2000,'easeInOutExpo');
            event.preventDefault();
        });
    });
});