JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-content">
<div id='row_1' asadasda></div>
<span id='row_2'><b>This text is bold</b></span>
<p id='row_3'><i>This text is italic</i></p>
<p id='row_4'><b>This text is bold</b></p>
<p id='row_5'><i>This text is italic</i></p>
<p id='row_6'><i>This text is italic</i></p>
<p id='row_7'><i>This text is italic</i></p>
<p id='row_8'><i>This text is italic</i></p>
<p id='row_9'><i>This text is italic</i></p>
<p id='row_10'><i>This text is italic</i></p>
<p id='row_11'><i>This text is italic</i></p>
<p id='row_12'><i>This text is italic</i></p>
<p id='row_13'><i>This text is italic</i></p>
<p id='row_14'><i>This text is italic</i></p>
<span id='row_15'><b>This text is bold 15</b></span>
<p id='row_16'><i>This text is italic</i></p>
<p id='row_17'><i>This text is italic</i></p>
<p id='row_18'><i>This text is italic</i></p>
<p id='row_19'><i>This text is italic</i></p>
<p id='row_20'><i>This text is italic</i></p>
<p id='row_21'><i>This text is italic</i></p>
<p id='row_22'><i>This text is italic</i></p>
</div>

CSS

.page-content {
  overflow: scroll;
  height: 150px;
}

JavaScript

var container = $(".page-content");
    scrollTo = $("#row_15");
    container.animate({
      scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    });