scroll parent to position given child in the middle of the visible area using javascript/jQuery -

i have <ul> 10 <li> elements in it, each of largish (say 200-300px high). have bunch of surrogates these items, small , visible. when user clicks on 1 of these surrogates, scroll <ul> cause corresponding <li> item positioned in middle of visible portion of <ul> (unless 1 of top or bottom elements).

i've looked @ bunch of examples use scrolltop: , cannot figure out how specify parameter correctly. i've created jsfiddle illustrate problem.

clarification:

the scrolling must operate on list, not on body element; must have scroll bar operates list scrolling manually. list 1 component in complex ui, , rest of elements must not scrolled operation.

jsfiddle

is need? changed markup little bit. function used scrolling:

$('.nav li a').click(function(e){     e.preventdefault();     var itemtop = $($(this).attr('href')).offset().top;     var itemheight = $($(this).attr('href')).height();     var windowheight = $(window).height();     $('html,body').animate({scrolltop:itemtop + itemheight/2 - windowheight/2},500) }); 

update

if need keep links or "surrogates" visible on top, try this fiddle updated styles

update 2

new attempt here may need adjust list height