JSFiddle - React, Tailwind, and code Playground

by hessam nadr

HTML

<a id="a1" class="section" >down</a>
<div class="up "></div>

<a id="a2" class="section" >up</a>
<div class="down "></div>

<a id="a3" class="section" >up</a>
<div class="down  green"></div>

CSS

.up {
    width:100px;
    height: 600px;
    background-color: red;
}

.down {
    width:100px;
    height: 400px;
    background-color: yellow;
}
.green{
    background:green;
}

JavaScript

$('a').on('click', function(e){
    var t = this.id.substring(1);
    e.preventDefault();
    var target= $(".section")[t] ;
    var offset = $( target ).offset();
    $('html, body').stop().animate({
       scrollTop: offset.top
    }, 1000);
});