JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
  <ul class="letters">
    <li>
      <a href="#letter-A">A</a>
    </li>
    <li>
      <a href="#letter-B">B</a>
    </li>
  </ul>
</div>
<div class="right" style="max-height: 320px;overflow-y: scroll;">
  <ul>
    <li>
      <h3 id="letter-A">A</h3></li>
    <li>Apple</li>
    <li>Alphanso</li>
    <li>
      <h3 id="letter-B">B</h3></li>
    <li>Ball</li>
    <li>Banana</li>
  </ul>
</div>

CSS

div {
  width: 100px;
  height: 70px;
  border: 1px solid blue;
  overflow: auto;
}

JavaScript

$(".letters li a").click(function() {
  var container = $('.right'),id = $(this).attr('href'),
    scrollTo = $(id);

  container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  });
});

/*
container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
);
*/