滚动到li元素 - jQuery

Question

我有一个 包含很多 "li" 元素的 "ul" 列表(数百个)，该 "ul" 的高度固定为约 400px，具有 css 属性 overflow:scroll，每个 "li" 的高度为 40px。因此，在任何时刻都只有不超过 10 个可见的 "li"（其余需要滚动）。 如何使用 jquery 将 ul 的滚动位置改变到特定的 li？

有什么想法？

- Ran

---

https://dev59.com/5nI-5IYBdhLWcg3wiY3a - mplungjan

Answer 1

你需要做类似于这样的事情：

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

如果你想要动画效果，请执行以下操作

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

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

- lonesomeday

---

太棒了，帮我节省了很多时间。 - TecHunter

我做了这个: $('#yourUL').scrollTop(0).scrollTop($('#yourUL li:nth-child(14)').position().top); 这样我们总是从顶部获取位置。 - TecHunter

你可能更喜欢这个： $('#yourUL').scrollTop($('#yourUL').top + $('#yourUL li:nth-child(14)').position().top); 因为它不会出现奇怪的跳转到顶部。 - ayal gelles

类似于水平滚动的代码： $('#yourUL').scrollLeft($('#yourUL li:nth-child(14)').position().left); - Beer Me

Answer 2

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

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

- Suncat2000

---

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

Answer 3

你可以这样做：

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

你需要调整值以使特定的 li 元素匹配 eq，你甚至可以自定义选择器。

- Sarfraz

---

但这不是改变整个页面的滚动位置吗？我想要改变 ul 元素的滚动位置。 - Ran

@Ran：根据您的需求，您需要在#ulID li:eq(1)的位置上指定适当的选择器 :) - Sarfraz

@Ran：将 $('html, body') 改为 $('#your-UL')。 - thirtydot

@thirtydot 这会产生一个古怪的效果--它需要使用position()而不是offset()，因为我们在这里讨论的不是元素的绝对位置，而是相对于该元素的位置。 - lonesomeday

@lonesomeday：说实话，我并没有仔细看。当我写下那个评论时，你的答案还没有出现。我只是回答了“这不会改变整个页面的滚动位置”的评论。 - thirtydot

@thirtydot 抱歉，我一开始没有意识到这是Sarfraz的帖子，而不是你的。 - lonesomeday

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);
};

- Darren