scrolling to li element - jquery

Question

i have a "ul" that contains lots of "li" (several hundred), the ul has a fixed hight of about 400px and the css property overflow:scroll, each li has the height of 40px so in every given moment there are no more then 10 visible li (the rest need to be scrolled to). how can i change the scroll position (using jquery) of the ul to a specific li?

any thoughts?

http://stackoverflow.com/questions/1805808/jquery-scrollintoview — mplungjan, Jan 03 '11 at 09:52

score 33 · Accepted Answer · answered Jan 03 '11 at 10:01

33

You need to do something like this:

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

If you want to animate it, do

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

Obviously adjust 14 for different lis.

answered Jan 03 '11 at 10:01

lonesomeday

233,373
50
316
318

nice, saved me so much time – TecHunter Nov 22 '13 at 10:19
I did that : `$('#yourUL').scrollTop(0).scrollTop($('#yourUL li:nth-child(14)').position().top);` this way we always get position from top. – TecHunter Nov 22 '13 at 13:19
you might like this more: `$('#yourUL').scrollTop($('#yourUL').top + $('#yourUL li:nth-child(14)').position().top);` since it doesn't involve a weird jump to the top – ayal gelles Jan 06 '14 at 09:51
Something similar for horizontal scrolling: `$('#yourUL').scrollLeft($('#yourUL li:nth-child(14)').position().left);` – Beer Me May 05 '20 at 16:30

score 27 · Answer 2 · answered Oct 03 '14 at 19:26

27

I got close using @lonesomeday's answer, but I found that I had to calculate the relative position of the specific li from the first li because it changed depending on the current scroll position of the containing ul.

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

answered Oct 03 '14 at 19:26

Suncat2000

966
1
12
15

Perfect - you can also scroll it into position based on the content of the LI $('#yourUL').scrollTop($('#yourUL li:contains('+texttofind+')').position().top - $('#yourUL li:first').position().top) https://jsfiddle.net/cetgk5op/ – Woffy May 29 '18 at 03:36

score 3 · Answer 3 · answered Jan 03 '11 at 09:53

3

You can do like this:

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

You need to adjust value to eq for specific li or you can even customize the selector.

answered Jan 03 '11 at 09:53

Sarfraz

377,238
77
533
578

but isnt this changing the scroll position of the entire body? i want to change the scroll position of the ul – Ran Jan 03 '11 at 09:56
@Ran: You need to specify appropriate selector in place of `#ulID li:eq(1)` as per your requirements :) – Sarfraz Jan 03 '11 at 09:59
@Ran: Change `$('html, body')` to `$('#your-UL')` – thirtydot Jan 03 '11 at 10:02
@thirtydot That'll give a kooky effect -- it needs `position()` not `offset()` given that we aren't talking about the absolute position of the element here, but that compared to the element. – lonesomeday Jan 03 '11 at 10:10
@lonesomeday: Didn't really look that hard to be honest. When I wrote that comment, your answer wasn't there yet. I just answered the "isnt this changing the scroll position of the entire body" comment. – thirtydot Jan 03 '11 at 10:13
@thirtydot Sorry, I didn't realise it was Sarfraz's post in the first place, rather than yours. – lonesomeday Jan 03 '11 at 10:17

score 2 · Answer 4 · answered Jun 23 '14 at 08:03

If anyone needs a vanilla JS version, the following is working well for me, the value of 50 is just so that I'm showing the whole item when I'm near the top of the list. You can adjust that.

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

scrolling to li element - jquery

4 Answers4

Linked