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

0123を

デモのアルファベットをクリックすると結果が表示されます。

Working Demo