Question

我有一个包含大量“li”（几百个）的“ul”，ul有一个大约400px的固定高度和css属性溢出：滚动，每个li的高度为40px所以在每个给定的时刻没有超过10个可见的li（其余的需要滚动到）。如何将ul的滚动位置（使用jquery）更改为特定的li？

有什么想法吗？

Answer 1

你需要做这样的事情：

$('#yourUL').scrollTop($('#yourUL li:nth-child(14)').position().top);

如果您想为其设置动画，请执行

$('#yourUL').animate({
     scrollTop: $('#yourUL li:nth-child(14)').position().top
}, 'slow');

显然会针对不同的14调整li。

Answer 2

我接近使用@ lonesomeday的回答，但我发现我必须计算第一个li中特定li的相对位置，因为它根据当前滚动而改变包含ul的位置。

$('#yourUL').scrollTop($('#yourUL li:nth-child(14)').position().top - $('#yourUL li:first').position().top)

Answer 3

你可以这样做：

$('html, body').animate({
     scrollTop:$('#ulID li:eq(1)').offset().top
}, 1000);

您需要针对特定eq将值调整为li，否则您甚至可以自定义选择器。

Answer 4

如果有人需要一个香草JS版本，以下对我来说效果很好，50的值只是为了让我在列表顶部附近显示整个项目。你可以调整它。

function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); // id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};

滚动到li元素 - jquery

4 个答案: