миниатюра по центру на полосе прокрутки (jQuery)

Question

Пожалуйста, проверьте эту страницу: http://onomadesign.com/wordpress/identity-design/hans-appenzeller/

Миниатюры справа, ссылки на различные элементы портфолио (отдельные сообщения Wordpress). Я хочу, чтобы миниатюра активного проекта была вертикально центрирована на полосе прокрутки при входе пользователя на страницу Прямо сейчас она сбрасывает полосу прокрутки, поэтому люди теряют из виду навигацию. Как это сделать с помощью jQuery?

Спасибо.

Answer 1

Попробуйте и сообщите, что происходит, я сам не могу это проверить:

$(function() {
    // Get the link that points to the current page
    var $active_link = $('a[href=\''+window.location.href+'\']');        
    // Get the scroll pane that the link is in
    var $scroll_pane = $active_link.closest('#scroll-pane');

    // Get the position where we should scroll
    var scrolltop = $active_link.offset().top - $(window).height() / 2;
    // Scroll amount must be at least 0
    scrolltop = scrolltop < 0 ? 0 : scrolltop;

    // Scroll the scrollpane so that the link sits at the middle
    $scroll_pane.scrollTop(scrolltop);
});

Обратите внимание, что это требует некоторого уточнения, но сначала вы должны подтвердить, что это работает в вашем случае & ndash; Я просто догадываюсь о части панели прокрутки в соответствии с документацией jScrollPane.

Answer 2

Я обнаружил, что плагин jScrollPane имеет собственную функцию ScrollTo: http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html. Даже с селекторами jQuery (внизу).

И мне удалось присвоить текущему миниатюрному изображению класс под названием currentthumb.

Теперь мне просто нужно, чтобы функция ScrollTo выполнялась при загрузке страницы, а не при событии щелчка, верно? Это выглядит проще, нет?

Спасибо.

Answer 3

Сначала добавьте класс «selected» в li текущей ссылки и используйте этот класс, чтобы добавить маржу вместо встроенного css

Похоже, вы используете jScrollPlane Plugin . Что позволит вам сделать что-то подобное с вашим текущим кодом.

$ ( 'jScrollPaneContainer.) ScrollTo (' currentthumb.');.

См. Эту страницу для jScrollPlane scrollTo функциональность