JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<a class="jumper" href="#first">Jump</a>
    
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget tellus blandit, tincidunt nibh a, sodales nibh. Donec vehicula sodales leo ut dignissim. Integer pretium ac nulla at luctus. Phasellus quis sem odio. Pellentesque mollis nec orci sed volutpat. Praesent consectetur elit a tincidunt faucibus. Sed vulputate lorem vestibulum, viverra eros vel, malesuada magna. Morbi sagittis tincidunt rutrum. Aenean at mi non dui iaculis posuere. Mauris sagittis, est non pretium consequat, erat nibh dapibus orci, vel scelerisque dolor sem in lectus. Proin bibendum, odio eu adipiscing mattis, nisl nulla consectetur libero, ac porta diam lorem ac odio.

Nam risus dolor, luctus at dolor non, ultricies semper enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam iaculis congue tortor sit amet dictum. Integer ultrices eros ut diam porttitor mattis. Fusce at interdum felis, ac mollis leo. In hac habitasse platea dictumst. Suspendisse velit felis, tincidunt ut quam vel, laoreet scelerisque odio.

Vivamus diam justo, tincidunt sit amet quam vel, adipiscing sagittis velit. Duis dignissim diam sed lorem dapibus, vel placerat elit viverra. Vivamus tincidunt condimentum nisi sit amet molestie. Fusce euismod nulla sit amet mi tempus ornare. Cras id fermentum nunc. Suspendisse vel nulla varius, condimentum ante id, consectetur quam. Fusce et interdum nulla. Proin scelerisque odio id purus posuere tincidunt. Etiam vestibulum neque nibh, vel tincidunt augue consequat ac. Nulla venenatis adipiscing dolor, a sagittis ligula accumsan ac.

Aliquam sed arcu elementum, tempor nisi sagittis, ultrices nulla. Proin nunc ligula, blandit non viverra sit amet, accumsan ac ante. Sed egestas, mauris ut mattis laoreet, eros urna cursus nunc, vitae vestibulum leo quam sit amet est. Nullam cursus...

CSS

#first{
background-color:red;
    height:200px;
    width:300px;
}
#second{
background-color:blue;
        height:200px;
    width:300px;
}
#third{
background-color:yellow;
        height:200px;
    width:300px;
}
#fourth{
background-color:green;
    width:300px;
}
#fifth{
background-color:olive;
    width:300px;
}

JavaScript

$("document").ready(function () {

        $('.jumper').click(function () {

            $('html, body').animate({
                scrollTop: $("#fifth").offset().top
            }, 2000);

        });


    });