JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div><a href="#" class="1">Jump to 1</a></div>
<div id="1">First Jump</div>
<div><a href="#" class="2">Jump to 2</a></div>
<div id="2">Second Jump</div>
<div><a href="#" class="3">Jump to 3</a></div>
<div id="3">Third Jump</div>
<div><a href="#" class="4">Jump to 4</a></div>
<div id="4">Fourth Jump</div>
<div class="bottomspace"></div>

CSS

div {
font-size: 20px;
margin-bottom: 300px;
}
div.bottomspace {
height: 1000px;
}

JavaScript

$(function () {
    $("a.1").on("click", function () {
        $("html, body").animate({
            scrollTop: $("#1").offset().top
        }, 200);
        return false;
    });
        $("a.2").on("click", function () {
        $("html, body").animate({
            scrollTop: $("#2").offset().top
        }, 400);
        return false;
    });
            $("a.3").on("click", function () {
        $("html, body").animate({
            scrollTop: $("#3").offset().top
        }, 800);
        return false;
    });
        $("a.4").on("click", function () {
        $("html, body").animate({
            scrollTop: $("#4").offset().top
        }, 1600);
        return false;
    });
});