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:58px;
    background:#eee;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #fff;
    padding:20px;
    color:000;
    font-family: Helvetica,Arial, Verdana,sans-serif;
    -webkit-transition: all 1000ms;
}
.anitem.current-last{
    background: #99d;
}
#listofstuff {
    width:300px;
    height:300px;
    overflow:auto;
}

JavaScript

$(document).ready(function() {
    var wrapper = $('#listofstuff'),
    element = wrapper.find('.anitem'),
    lastElement = wrapper.find('.anitem:last-child'),
    lastElementTop = lastElement.position().top,
    elementsHeight = element.outerHeight(),
    scrollAmount = lastElementTop - 2 * elementsHeight;

    $('#listofstuff').animate({
        scrollTop: scrollAmount
    }, 1000, function() {
        lastElement.addClass('current-last');
    });
});