Clever Geek Handbook

Long UL to DIV list, auto scroll to LI element

I have such a strange problem, I have a div

_inputHelper // it has fixed height ( 200px )

with a very, very long <ul>

list in it (about 200 elements) and I would like to scroll using jQuery to some <li>

in the list, but the problem is when I loop through the whole list in a way like this:

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

      

        
        
        
      

    
_this is a LI element I would like to scroll to

scrolls down in a good place, but I cannot scroll the list with the mouse, more precisely, more precise:

long UL in div auto scroll problem

I think I may be scrolling wrong, but I also tried scrollTop / margin-top and it still didn't work.

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

Any help?

+3


source to share


2 answers


Based on your script you need to use scrollTop

, try this:

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

Check Demo Script



In your code, you simply move the element ul

and then exit the parent view; now with this you change the parent's scroll.

+5


source


I seem to remember this problem once, a few years ago (scrolling the inner element to a certain point, versus scrolling the viewport to the element) and I think I solved it with a jQuery plugin I found. This is done simply.



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

0


source






More articles:


All Articles