javascript - 使用 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>

J查询代码

$('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