JSFiddle - React, Tailwind, and code Playground

by twilvaro

HTML

<script src="http://kryogenix.org/code/browser/smoothscroll/smoothscroll.js"></script>
<body>
<nav>
  <ul>
    <li><a class="smoothScroll" href="#uno">Apartado 1</a></li>
    <li><a class="smoothScroll" href="#dos">Apartado 2</a></li>
    <li><a class="smoothScroll" href="#tres">Apartado 3</a></li>
    <li><a class="smoothScroll" href="#cuatro">Apartado 4</a></li>
  </ul>
</nav>  

<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
<div id="cuatro"></div>
    
</body>

CSS

/* Como explica pzin, le damos el 100% de alto y le añadimos overflow: hidden para quitar los scroll al contenedor; body */

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

/* Fijamos la navegación para que sea siempre accesible por el usuario */

nav {
  position: fixed;
  bottom: 0;
}

/* Personalizo el menú para el ejemplo */

nav ul {
    list-style-type: none;
    padding: .5em;
    margin: 0;
}

nav li {
    display: inline-block;
    margin-right: .5em;
}

a {
    color: black;
}

/* Proporciono un alto y un color a los divs para ver el ejemplo en funcionamiento */

div {
    height: 600px;
}

#uno {
    background-color: aquamarine;
}

#dos {
    background-color: gold;
}

#tres {
    background-color: gainsboro;
}

#cuatro {
    background-color: bisque;
}