JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div>
<ul>
    <li>001</li>
    <li>002</li>  
    <li>003</li>  
    <li>004</li>  
    <li>005</li>  
    <li>006</li>  
    <li>007</li>  
    <li>008</li>  
    <li>009</li>  
    <li>010</li>  
    <li>011</li>  
    <li>012</li>  
    <li>013</li>  
    <li>014</li>  
    <li>015</li>  
    <li>016</li>  
    <li>017</li>  
    <li>018</li>  
    <li>019</li>  
    <li>020</li>  
    <li>021</li>  
    <li>022</li>  
    <li>023</li>  
    <li>024</li>  
    <li>025</li>  
    <li>026</li>  
    <li>027</li>  
    <li>028</li>  
    <li>029</li>  
    <li>030</li>  
    <li>031</li>  
    <li>032</li>  
    <li>033</li>  
    <li>034</li>  
    <li>035</li>  
    <li>036</li>  
    <li>037</li>  
    <li>038</li>  
    <li>039</li>  
    <li>040</li>  
    <li>041</li>  
    <li>042</li>  
    <li>043</li>  
</ul>
</div>

CSS

div{
    height:100px;
    overflow:auto;
    border:1px solid red;
}

JavaScript

var content = $('div');
var divHeight = $('div').outerHeight();
var elementHeight = $('li').eq(17).outerHeight();
var listHeight = $('li').eq(27).offset().top + elementHeight;

console.log(elementHeight);

content.stop().animate({
    scrollTop : listHeight - divHeight
}, 400)