JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/flesler/jquery.scrollTo/master/jquery.scrollTo.js"></script>
<input id="btnSave" t type="button" value="Click to scroll" />
<br/><br/>
<DIV id="dvmn" class="dvMain">
    <DIV id="d1" class="sub1">
         <DIV id="s11" class="sub2">11</DIV>
        <DIV id="s12" class="sub2">12</DIV>
        <DIV id="s13" class="sub2">13</DIV>
    </DIV>
    <DIV id="d2" class="sub1">
         <DIV id="s21" class="sub2">21</DIV>
        <DIV id="s22" class="sub2">22</DIV>
        <DIV id="s23" class="sub2">23</DIV>
    </DIV> 
       <DIV id="d3" class="sub1">
         <DIV id="s31" class="sub2">31</DIV>
        <DIV id="s32" class="sub2">32</DIV>
        <DIV id="s33" class="sub2">33</DIV>
    </DIV> 
</DIV>

CSS

.CheckArea    {
                 border:Outset 3px Red;width:340px; height:30px; 
            }
.dvMain{
width:400px;height:100px;background-color:black;  overflow: auto;
}
.sub1{
width:190px;height:100px;background-color:purple; 
    margin:  10px auto;
}
.sub2{
width:180px;height:20px;background-color:gray;  margin:  5px auto;
}

JavaScript

var c = 0;
$("#btnSave").click(function(event) {
    $("#dvmn").scrollTo($("#d" + (c++)), { duration: 500});
  
  
});