прокрутите родительский элемент до положения данного ребенка в середине видимой области с помощью javascript/jQuery

Question

У меня есть <UL> с 10 <LI> элементами в нем, каждый из которых довольно большой (скажем, 200-300 пикселей в высоту). У меня также есть куча суррогатов для этих предметов, которые малы и всегда видны. Когда пользователь нажимает на один из этих суррогатов, я хотел бы прокрутить <UL>, чтобы вызвать соответствующий элемент <LI>, расположенный в середине видимой части <UL> (если только это не один из верхних или нижних элементов) ,

Я уже рассмотрел кучу примеров, которые используют scrollTop: и не могут понять, как правильно указать параметр. Для иллюстрации проблемы я создал jsfiddle.

Разъяснение:

Скроллинг должен работать в списке, а не на BODY элемента; он также должен иметь полосу прокрутки, которая управляет списком прокрутки вручную. Список является всего лишь одним компонентом в сложном пользовательском интерфейсе, а остальные элементы не должны прокручиваться этой операцией.

Answer 1

jsFiddle

Является ли это то, что вам нужно? Я немного изменил разметку. Это функция, которую я использовал для скроллинга:

$('.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

Если вам нужно сохранить ссылки или «суррогаты» всегда видна сверху, а затем попробовать this fiddle с обновленными стилями

UPDATE 2

Новая попытка here вам может потребоваться изменить высоту списка