JSFiddle - React, Tailwind, and code Playground

by Shaunak Deshpande

HTML

<div id="main">
    <div id="one" align="center">
        Here
    </div>
    <br>
    <div id="two">
    </div>
        <br>
    <div id="three">
    </div>    
</div>
<div id="scroll">
    Scroll To Top
</div>

CSS

#scroll{
    float:right;
    height:55px;
    width:40px;
    background-color:lightgrey;
    font-size:15px;
    border: solid 2px;
}
#main{
    height:450px;
    overflow:auto;
    background-color:lightblue;
}

#one{
    height:50px;
    width : 200px;
    background-color:blue;
    margin-top:30px;
    margin-left:120px;
    color:white;
}
#two{
    height:50px;
    width : 200px;
    background-color:green;
        margin-left:120px;
    
}
#three{
    height:50px;
    width : 200px;
    background-color:purple;
    margin-left:120px;
}

JavaScript

$("#scroll").hide();
$("#scroll").click(function(){
    $("#main").scrollTop(0);
}
);
$("#one, #two, #three").click(function(){
    $(this).animate({height: "+=40px"},200);
    var x = $("#main").height();
    var y = $("#one").height()+$("#two").height()+$("#three").height()+100;
    if(y >= 440){
       $("#main").scrollTop(x+(y-x)+50);
        $("#scroll").show();
    }

});