JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<nav>
    <ul>
        <li><a href="#about">about</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#contact">contact</a></li>
    </ul>
</nav>
<div id="wrap">
    <div id="about">about</div>
    <div id="services">services</div>
    <div id="contact">contact</div>
    <div id="footer">footer</div>
</div>

CSS

* {width: 100%;}
body {margin:0; padding: 0;}
nav {position: fixed; background-color: gray;}
li {display: inline;}
.active {color: yellow}
#about {height: 500px; background-color: pink;}
#services {height: 500px; background-color: orange;}
#contact {height: 500px; background-color: purple;}
#footer {height: 500px; background-color: wheat;}

@media (max-width: 399px) {
nav {height: 50px;}
#wrap {padding-top: 50px;}
}

@media (min-width: 400px) {
nav {height: 100px;}
#wrap {padding-top: 100px;}
}

JavaScript

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - $('nav').height()
        }, 1000);
        return false;
      }
    }
  });
});