JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<ul id="nav">
    <li><a href="#section-1">1</a></li>
    <li><a href="#section-2">2</a></li>
    <li><a href="#section-3">3</a></li>
</ul>


<div id="section-1">
    <h2>1</h2>
<p>Diam pulvinar adipiscing urna, dignissim quis pellentesque hac lacus sit tincidunt rhoncus, augue ac pid dapibus placerat ut. Aliquam dis! Enim urna arcu dictumst pellentesque hac lundium, adipiscing vut porta, sit velit sagittis scelerisque, cum pulvinar augue lundium integer scelerisque! In ac augue rhoncus, proin urna dis ultricies tincidunt enim cras! Ac nec enim, est dis, porta, pulvinar hac dolor. Aliquet diam hac augue elementum scelerisque arcu lacus, vel turpis, eu dis lorem in urna et mus in, dis tortor, duis. Tristique. Ridiculus ac odio amet placerat augue, nascetur sed in enim platea quis dapibus nunc in, ultricies enim placerat massa aenean dis aliquet aliquam ac ac pellentesque ac montes quis tincidunt nascetur ut lacus ultricies ac rhoncus est parturient.</p>
    <p>Diam pulvinar adipiscing urna, dignissim quis pellentesque hac lacus sit tincidunt rhoncus, augue ac pid dapibus placerat ut. Aliquam dis! Enim urna arcu dictumst pellentesque hac lundium, adipiscing vut porta, sit velit sagittis scelerisque, cum pulvinar augue lundium integer scelerisque! In ac augue rhoncus, proin urna dis ultricies tincidunt enim cras! Ac nec enim, est dis, porta, pulvinar hac dolor. Aliquet diam hac augue elementum scelerisque arcu lacus, vel turpis, eu dis lorem in urna et mus in, dis tortor, duis. Tristique. Ridiculus ac odio amet placerat augue, nascetur sed in enim platea quis dapibus nunc in, ultricies enim placerat massa aenean dis aliquet aliquam ac ac pellentesque ac montes quis tincidunt nascetur ut lacus ultricies ac rhoncus est parturient.</p>
    <p>Diam pulvinar adipiscing urna, dignissim quis pellentesque hac lacus sit tincidunt rhoncus, augue ac pid dapibus placerat ut. Aliquam dis! Enim urna arcu dictumst pellentesque hac lundium, adipiscing vut porta, sit velit sagittis...

CSS

body {
    width: 70%;
    margin: 2em auto;
    font: 90% Arial, sans-serif;
    position: relative;
    height: 100%;
    min-height: 100%;
}

#nav {
    position: fixed;
    top: 50%;
    left: 0;
    width: 4em;
    height: 13.5em;
    margin-top: -6.5em;
}

#nav li {
    display: block;
    width: 4em;
    height: 4em;
    margin-bottom: 0.5em;
}

#nav a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 4;
    text-align: center;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
}

#nav a:hover { background: #333; }

div {
    margin-top: 40em;
    line-height: 1.4;
    padding: 1em;
    background: #eee;
    position: relative;
}

div p {
    margin-bottom: 0.5em;
    letter-spacing: 0.1em;
    text-align: justify;
}

div h2 {
    width: 4em;
    height: 4em;
    background: #333;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 4;
    position: absolute;
    top: 1em;
    left: -4.5em;
}

JavaScript

$('a', '#nav').click(function(event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top
    }, 800, 'linear');


});