JSFiddle - React, Tailwind, and code Playground

by hohoya33

HTML

<div class="button" data-path="first">1</div>
<div class="button" data-path="second">2</div>
<div class="button" data-path="third">3</div>
<div class="button" data-path="fourth">4</div>
<div class="button" data-path="fifth">5</div>
<div class="button" data-path="sixth">6</div>
<div class="button" data-path="seventh">7</div>
<div id="container">
    <div id="first" class="big">1</div>
    <div id="second" class="big">2</div>
    <div id="third" class="big">3</div>
    <div id="fourth" class="big">4</div>
    <div id="fifth" class="big">5</div>
    <div id="sixth" class="big">6</div>
    <div id="seventh" class="big">7</div>
</div>

CSS

#container {
    position: fixed;
    width: 300px;
    height: 300px;
    overflow-y: scroll;
}

.big {
    height: 100px;
    background-color: #BBBBCC;
    margin-bottom: 5px;
}

.button {
    display: inline-block;
    width: 40px;
    height: 30px;
    cursor: pointer;
    background-color: #CCCCEE;
    margin-bottom: 10px;
    text-align: center;
    line-height: 30px;
}

JavaScript

$(".button").on("click", function(){
    var path = $(this).attr("data-path");
    var anchor = $("#" + path);
    var position = anchor.position().top +             $("#container").scrollTop();
    console.log(position);
    $("#container").animate({scrollTop: position});
});