JSFiddle - React, Tailwind, and code Playground

by bortao

HTML

<div id="button20" class="button">Go to 20</div>
<div id="button50" class="button">Go to 50</div>
<div id="button80" class="button">Go to 80</div>
<div id="container"></div>

CSS

#container {
    width: 200px;
    height: 600px;
    border: 1px solid blue;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 10px;
    right: 30px;
}

#container .thumb {
    width: 180px;
    height: 50px;
    border: 1px solid red;
}

.sel {
    background-color: #777;
}

.button {
    border: 1px solid black;
    background-color: #ccc;
    display: table;
    cursor: pointer;
    padding: 3px;
}

JavaScript

for (var i = 0; i < 150; i++)
    $("#container").append("<div class='thumb'>" + i + "</div>");

$("#button20").click(function() { moveTo(20) });
$("#button50").click(function() { moveTo(50) });
$("#button80").click(function() { moveTo(80) });

function moveTo(index) {
    var cont = $("#container");
    var el = $(cont[0].children[index]);
    var h = cont.height() / 2;
    
    /* ---------------- */

    var elementTop = el.position().top;

    /* ---------------- */
        
    cont.animate({scrollTop: (elementTop + h)});
    $(".sel").removeClass("sel");
    el.addClass("sel");
};