JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div id="navlinks">
<a data-href="#box1">Link 1 </a>
<a data-href="#box2">Link 2 </a>
<a data-href="#box3">Link 3 </a>
</div>

<div class="content">
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac mi aliquet mauris facilisis gravida. Cras feugiat, magna non porttitor pharetra, ante orci euismod risus, ac placerat mauris nisi eget lectus. Etiam a elit vitae tortor mattis sagittis. Sed nec turpis quis mi rutrum mattis ac ut magna. Praesent pretium porta tellus, non placerat massa faucibus eget. Aenean sagittis, sem sit amet malesuada tempor, nulla magna pretium diam, non viverra nunc erat id nibh. Fusce fermentum nisi in magna vehicula porttitor. Nunc pharetra elementum mauris. Sed accumsan nisi et dolor interdum pretium rhoncus tellus porttitor. Quisque vitae neque nec augue varius condimentum quis in ligula. Morbi in mi ac felis egestas ullamcorper. 
</div>

<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac mi aliquet mauris facilisis gravida. Cras feugiat, magna non porttitor pharetra, ante orci euismod risus, ac placerat mauris nisi eget lectus. Etiam a elit vitae tortor mattis sagittis. Sed nec turpis quis mi rutrum mattis ac ut magna. Praesent pretium porta tellus, non placerat massa faucibus eget. Aenean sagittis, sem sit amet malesuada tempor, nulla magna pretium diam, non viverra nunc erat id nibh. Fusce fermentum nisi in magna vehicula porttitor. Nunc pharetra elementum mauris. Sed accumsan nisi et dolor interdum pretium rhoncus tellus porttitor. Quisque vitae neque nec augue varius condimentum quis in ligula. Morbi in mi ac felis egestas ullamcorper. 
</div>

<div id="box3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac mi aliquet mauris facilisis gravida. Cras feugiat, magna non porttitor pharetra, ante orci euismod risus, ac placerat mauris nisi eget lectus. Etiam a elit...

CSS

body
{
    overflow: hidden;
}

#navlinks
{
    position: fixed;
}

a{
    margin-right:15px;
    cursor:pointer;
    text-decoration:underline;
    color:blue;
}

div.content div
{
    position: absolute;
    width:100%;
    top:25px;
    left:0px;
}

#box1{
    background: yellow;
    left:0px;
}

#box2{
    background: orange;
    left:100%;
}

#box3{
    background: #838EDE;
    left:200%;
}

JavaScript

$(document).on('click', '#navlinks a', function() {
    var panel = $(this).data('href');
    $.scrollTo(panel, 1000);
});