JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<div id="scroll">
    <p>0</p>
    <p class='active'>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
</div>

CSS

#scroll {
    border: 1px solid #f0f;
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

p{
    margin: 10px;
    height: 30px;
    background: #f00
}

JavaScript

var $scroll = $('#scroll');

$('p').click(function(e){
    var $this = $(this);
    //$scroll.scrollTop($this.position().top + $scroll.scrollTop())
    $scroll.animate({
        "scrollTop": $this.position().top + $scroll.scrollTop()
    }, 1000);
});