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: /

Any help?

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/uk5xqfry/3/

Any help?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 10, 2014 at 13:13 kuba asked Oct 10, 2014 at 12:58 kubakuba 99911 gold badge1818 silver badges4040 bronze badges 3

• 2 use scrollTop instead of top ... can you share the markup or make an example on jsfiddle – DaniP Commented Oct 10, 2014 at 13:02
• ups, sorry misspelling, I've mean scrollTop, not scrollTo :) I will try to do some jsfiddle – kuba Commented Oct 10, 2014 at 13:05
• jsfiddle/uk5xqfry/3 here you go :) – kuba Commented Oct 10, 2014 at 13:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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./flesler/jquery.scrollTo