JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-1">1</div>
<div id="content-2">2</div>
<div id="content-3">3</div>
<div id="content-4">4</div>
<div id="content-5">5</div>
<div id="content-6">6</div>
<div id="content-7">7</div>
<div id="content-8">8</div>
<div id="content-9">9</div>
<div id="content-10">10</div>
<div id="content-11">11</div>
<div id="content-12">12</div>
<div id="content-13">13</div>
<div id="content-14">14</div>
<div id="content-15">15</div>
<div id="content-16">16</div>
<div id="content-17">17</div>
<div id="content-18">18</div>
<div id="content-19">19</div>
<div id="content-20">20</div>
<div id="content-21">21</div>
<div id="content-22">22</div>
<div id="content-23">23</div>
<div id="content-24">24</div>
<div id="content-25">25</div>
<div id="content-26">26</div>
<div id="content-27">27</div>
<div id="content-28">28</div>
<div id="content-29">29</div>
<div id="content-30">30</div>
<div id="content-31">31</div>
<div id="content-32">32</div>
<div id="content-33">33</div>
<div id="content-34">34</div>
<div id="content-35">35</div>
<div id="content-36">36</div>
<div id="content-37">37</div>
<div id="content-38">38</div>
<div id="content-39">39</div>
<div id="content-40">40</div>
<div id="content-41">41</div>
<div id="content-42">42</div>
<div id="content-43">43</div>
<div id="content-44">44</div>
<div id="content-45">45</div>
<div id="content-46">46</div>
<div id="content-47">47</div>
<div id="content-48">48</div>
<div id="content-49">49</div>
<div id="content-50">50</div>

CSS

div {
    height: 50px;
    margin: 0 0 10px 0;
    background-color: #DDD;
}

JavaScript

$('html, body').animate({
    scrollTop: $('#content-10').offset().top
}, 1500);