JS/Jquery

Question

'u kullanarak belirli bir öğeye ilerleyin. Aşağıdakine benzeyen bir div var. Bir kullanıcı soldan alfabelere tıkladığında, sağ taraf o alfabe başlığına kaydırılmalıdır.

<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 kodu

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

Bu çözümü denedim ama düzgün jQuery scroll to element

Answer 1

bu deneyin işe yaramadı:

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

Demodaki alfabenin herhangi birine tıklayın ve sonucu görebilirsiniz.

Working Demo