JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.6/jquery.slimscroll.js"></script>
<ul></ul>

CSS

.root {
    display: block
}
li a {
    color: #444;
    text-decoration: none;
}
li.active a {
    color: red; /* yes, sweet red */
    font-weight: bold;
}

JavaScript

$(function () {
    
    for (var a=[],i=1;i<200;++i) a[i]=i;
    
    a.forEach(function(i) {                
        $("ul").append("<li class='el_%s'><a href='#'>element %s</a></li>".replace(/%s/g, i));
    });
        
    var random_el = Math.floor((Math.random() * 200) + 1);
    $("ul li.el_"+random_el).addClass("active");
    
    var abs_height = $("ul li.active").offset().top - $("ul").offset().top;
    
    var scrollTo_int = $('ul li.active').prop('scrollHeight') + 'px';
    $('ul').slimScroll({height: 500}).scrollTop(abs_height);
})