title: Scroll to specific item using JS/Jquery
body: <p>I have a div which looks like below. When a user clicks on alphabets from left, the right side should scroll to that alphabet heading.</p>
  
  <p><a href="https://i.stack.imgur.com/Hdl3d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hdl3d.png" alt="Div"></a></p>
  
  <pre><code>&lt;div class="left"&gt;
      &lt;ul class="letters"&gt;
          &lt;li&gt;
              &lt;a href="#letter-A"&gt;A&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#letter-B"&gt;B&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="right brands-scroll" style="max-height: 320px;overflow-y: scroll;"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;h3 id="letter-A"&gt;A&lt;/h3&gt;&lt;/li&gt;
          &lt;li&gt;Apple&lt;/li&gt;
          &lt;li&gt;Alphanso&lt;/li&gt;
          &lt;li&gt;&lt;h3 id="letter-B"&gt;B&lt;/h3&gt;&lt;/li&gt;
          &lt;li&gt;Ball&lt;/li&gt;
          &lt;li&gt;Banana&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery code</p>
  
  <pre><code>$('ul.letters li a').on('click', function (t) {
      t.preventDefault();
      var targetSec = $(this).attr('href');
      $('.brands-scroll').stop().animate({
          scrollTop: $('#' + targetSec).offset().top
      }, 500);
  });
  </code></pre>
  
  <p>I tried this solution, but it didn't work properly
  <a href="https://stackoverflow.com/questions/6677035/jquery-scroll-to-element">jQuery scroll to element</a></p>