JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article-content">
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title1</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title2</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title3</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title4</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title5</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title6</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title7</h2>
</div>
<a name="anchor"></a>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title8</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title9</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title10</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title11</h2>
</div>
<div class="title">
    <a href="" class="next">next</a>
    <h2>title12</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title13</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title14</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title15</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title16</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title17</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title18</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title19</h2>
</div>
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title20</h2>
</div>
    

</div>

JavaScript

$(".next").click(function() {
       $('html,body').animate({ scrollTop:$(this).parent().next().offset().top}, 'medium');

});