JSFiddle - React, Tailwind, and code Playground

by xawixawxaw

HTML

<a id="next">Next</a>

<div id="hi"> <span class="a"></span>
 <span class="b"></span>
 <span class="c"> </span>
 <span class="d"></span>
 <span class="e"></span>

</div>

CSS

#hi {
    width:100%;
    height:100px;
    overflow:auto;
    display:block;
}
span {
    width:100%;
    display:block;
    height:80px;
    margin: 10px 0;
}
.a {
    background: lightgreen
}
.b {
    background: lightblue
}
.c {
    background: gray
}
.d {
    background: orange
}
.e {
    background: salmon
}
a {
    cursor:pointer
}

JavaScript

$(function () {
    $("#next").on("click", function () {
       //alert("hi");
       $("#hi").animate({scrollTop: "+=20"}, 1000);
    });

});