我有一个如下所示的 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
最佳答案
试试这个:
$(".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()
});
});
点击演示中的任意一个字母,您可以看到结果。
关于javascript - 使用 JS/Jquery 滚动到特定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36544368/