javascript - Scrollbar won't scroll when selected element is out of visibility -

We have several inventory items in an unordered list, of which we can see five at a time, currently selected list item ("Selected") and when we click above or below, the next list item becomes "selected" square, while the last time it loses, how do we create it, when the "selected" class With the list item comes out of the viewable area of ​​ul, scroll bar "select Committee will also scroll with "item?

It scrolls smoothly with the mouse, but when the buttons on the top / bottom are clicked, the selected class changes, but it does not scroll in the CSS, UL is styled with overflow: Auto I tried to change the overflow but there is no effect on the result.

This problem can be seen here: Click on the text box, and a dropdown list will appear. Then use the keyboard up / down arrow, continue until you reach the limit. Note that the scroll does not follow the "selected" element.

Use scrollTop scroll state ul above And to move it down in your case:

  $ ("Services ul"). ScrollTop ($ ('li'). Index ($ (". Selected")) * $ ('Services'). Height ());   
 In the code above,  $ ('li'). Index ($ (". Selected"))  receives the number of currently selected code> Li  element then this number is multiplied by the height of each  li .  
  
 You may need to clean it according to your choice.