JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="listofstuff">
    <div class="anitem">
       <span class="itemname">Item1</span>
       <span class="itemdescruption">AboutItem1</span>
    </div>
    <div class="anitem">
       <span class="itemname">Item2</span>
       <span class="itemdescruption">AboutItem2</span>
    </div>
    <div class="anitem">
       <span class="itemname">Item3</span>
       <span class="itemdescruption">AboutItem3</span>
    </div>
    <div class="anitem">
       <span class="itemname">Item4</span>
       <span class="itemdescruption">AboutItem5</span>
    </div>
    <div class="anitem">
       <span class="itemname">Item5</span>
       <span class="itemdescruption">AboutItem5</span>
    </div>
</div>

CSS

.anitem {
height:100px;
}

#listofstuff {

height:300px;
    overflow:auto;
}

JavaScript

$(document).ready(function(){
    lastElementTop = $('#listofstuff .anitem:last-child').position().top ;
    scrollAmount = lastElementTop - 200 ;
    
$('#listofstuff').animate({scrollTop: scrollAmount},1000);
});