JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<nav>
    <ul>
        <li>
            <a href="#seccion1">seccion1</a>
            <a href="#seccion2">seccion2</a>
            <a href="#seccion3">seccion3</a>
        </li>
    </ul>
</nav>

<div id="seccion1" class="azul"></div>
<div id="seccion2" class="amarillo"></div>
<div id="seccion3" class="rojo"></div>

CSS

nav{
    position:fixed;
    text-align:center;
    top:0;
    left:0;
    padding:10px;
    background:#000;
    width:100%;
}
nav a{
    color:#fff;
    text-decoration:none;
}
div{
    height:500px;
}
.azul{
    background:blue;
}
.amarillo{
    background:yellow;
}
.rojo{
    background:red;
}

JavaScript

$(function(){
    $('nav a').click(function(){
        var id = $(this).attr('href'),
            posicion = $(id).offset().top - 72;
        $('html, body').animate({scrollTop : posicion},1000);
    });
});