滚动到 li 元素 - jquery答案

【问题标题】：scrolling to li element - jquery滚动到 li 元素 - jquery
【发布时间】：2011-01-03 09:50:31
【问题描述】：

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

有什么想法吗？

【问题讨论】：

stackoverflow.com/questions/1805808/jquery-scrollintoview

标签： javascript jquery html

【解决方案1】：

你需要做这样的事情：

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

如果你想动画化它，做

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

显然针对不同的lis 调整14。

【讨论】：

很好，为我节省了很多时间
我做到了：$('#yourUL').scrollTop(0).scrollTop($('#yourUL li:nth-child(14)').position().top); 这样我们总是从顶部获得位置。
你可能更喜欢这个：$('#yourUL').scrollTop($('#yourUL').top + $('#yourUL li:nth-child(14)').position().top);，因为它不涉及奇怪的跳转到顶部
水平滚动类似的东西：$('#yourUL').scrollLeft($('#yourUL li:nth-child(14)').position().left);

【解决方案2】：

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

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

【讨论】：

完美 - 您还可以根据 LI $('#yourUL').scrollTop($('#yourUL li:contains('+texttofind+')') 的内容将其滚动到适当位置.position().top - $('#yourUL li:first').position().top) jsfiddle.net/cetgk5op

【解决方案3】：

你可以这样做：

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

对于特定的li，您需要将值调整为eq，或者您甚至可以自定义选择器。

【讨论】：

但这不是改变整个body的滚动位置吗？我想改变 ul 的滚动位置
@Ran：您需要根据您的要求指定适当的选择器代替#ulID li:eq(1) :)
@Ran：把$('html, body')改成$('#your-UL')
@thirtydot 这会产生一种奇怪的效果——它需要position() 而不是offset()，因为我们在这里不是在谈论元素的绝对位置，而是与元素相比.
@lonesomeday：说实话看起来并不难。当我写那条评论时，你的答案还没有出现。我刚刚回答了“这不是改变整个身体的滚动位置”的评论。

【解决方案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);
};

【讨论】：