JSFiddle - React, Tailwind, and code Playground

HTML

<button>scroll it</button>
<div id="modal" class="modal">
    <div class="item" id="item1">1</div>
    <div class="item" id="item2">2</div>
    <div class="item" id="item3">3</div>
    <div class="item" id="item4">4</div>
    <div class="item" id="item5">5</div>
    <div class="item" id="item6">6</div>
    <div class="item" id="item7">7</div>
    <div class="item" id="item8">8</div>
    <div class="item" id="item9">9</div>
    <div class="item" id="item10">10</div>
    <div class="item" id="item11">11</div>
    <div class="item" id="item12">12</div>
    <div class="item" id="item13">13</div>
    <div class="item" id="item14">14</div>
    <div class="item" id="item15">15</div>
    <div class="item" id="item16">16</div>
    <div class="item" id="item17">17</div>
    <div class="item" id="item18">18</div>
    <div class="item" id="item19">19</div>
    <div class="item" id="item20">20</div>
</div>

CSS

.modal{
    width: 300px;
    height: 200px;
    overflow: auto;
    margin: 50px auto;
    border: solid 1px #c1c1c1;
    border-radius: 5px
}
.item{
    padding: 5px;
    border-bottom: solid 1px #c1c1c1;
}
.item:last-child{

    border-bottom: none;
}

JavaScript

//scrolls to element #item13 subtracts 80px from offset top


$('button').on('click',function(){
  $('#modal').animate(
    { scrollTop: $('#item13').offset().top -80 }, 
    500);  
});