Перейдите к определенному элементу, используя JS/JQuery

Question

У меня есть div, который выглядит ниже. Когда пользователь нажимает на алфавиты слева, правая сторона должна прокручиваться до этого заголовка алфавита.

<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 brands-scroll" 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> 

Jquery код

$('ul.letters li a').on('click', function (t) { 
    t.preventDefault(); 
    var targetSec = $(this).attr('href'); 
    $('.brands-scroll').stop().animate({ 
     scrollTop: $('#' + targetSec).offset().top 
    }, 500); 
}); 

Я попытался это решение, но оно не работает должным образом jQuery scroll to element

Answer 1

Попробуйте это:

$(".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() 
    }); 
}); 

Нажмите на любой из алфавитов в демоверсии, и вы увидите результат.

Working Demo