Long UL list in DIV, auto scroll to LI element

Question

I have such a weird problem, I have a div

_inputHelper // it has fixed height ( 200px )

with very,very long <ul> list in it ( around 200 of elements) and I would like to scroll using jQuery to some <li> on the list, but the problem is that, when I scroll whole list in such a way:

$( _inputHelper.find('ul') ).animate( { top : -1 * ( $(_this).position().top - $(_this).height() ) } , 200);

 _this is a LI element I would like to scroll to 

is scrolled down in good place, but I cannot scroll list using mouse, here is a printscreen to be more precise:

I think I may scroll in wrong way, but I've tried also scrollTop/margin-top and it still didn't work.

some tests: http://jsfiddle.net/uk5xqfry/3/

Any help?

Answer 1

Based on your Fiddle you need to use scrollTop , try this:

$('.input-helper').animate({
    scrollTop : $("#test").position().top,
}, 200);

Check the Demo Fiddle

---

In your code you are just moving the ul element and then is out of the parent view; now with this you are changing the scroll of the parent.

Answer 2

I seem to remember having this issue once, a number of years back (scrolling an inner element to a certain point, versus scrolling the viewport to an element) and I think I resolved it with a jQuery plugin that I found. Made it simple.

https://github.com/flesler/jquery.scrollTo