JSFiddle - React, Tailwind, and code Playground

by alamin84

HTML

<script src="https://raw.github.com/flesler/jquery.scrollTo/master/jquery.scrollTo.js"></script>

<input id="btnScroll" t type="button" value="Click to scroll" />
<br/><br/><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

$("#btnScroll").click(function (event) {

     var $firstinner, $lastinner, $containerinner = $("#dvmn"),
         positions = $containerinner.offset(),
         positionsinner = $containerinner.offset();


     $('.sub2').each(function (i, obj) {
         var $thisinner = $(this),
             positioninner = $thisinner.offset();
       

         if (!$firstinner && positioninner.top >= positions.top) {

             $firstinner = $thisinner.next();
             if ($firstinner.length == 0) {
                 $firstinner = $thisinner.parent().next();
              
             }
           
             console.log($firstinner);
         }

     });

     $containerinner.scrollTo($($firstinner), {
         duration: 500
     });



 });