centre thumbnail in scrollbar (jQuery)

问题

Please check out this page: http://onomadesign.com/wordpress/identity-design/hans-appenzeller/

The thumbnails on the right, link to different portfolio items (Wordpress single posts). I want the thumbnail of the active project to be vertically centred in the scrollbar when the user enters the page. Right now, it resets the scrollbar, so people lose sight of navigation. How to accomplish this using jQuery?

Thanks.

回答1:

First add the class of "selected" to the li of the current link and use that class to add your margin rather then inline css

Looks like you are using the jScrollPlane Plugin. Which will let you do something like this with your current code.

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

See this page for the jScrollPlane scrollTo functionality

回答2:

Try this and report what happens, I'm unable to test this myself:

$(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);
});

Note that this needs some refinement, but first you have to confirm that this works in your case – I'm just guessing on the scroll-pane part according to the documentation of jScrollPane.

回答3:

I found out that the jScrollPane plugin, has a ScrollTo function of his own: http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html. Even with jQuery selectors (at the bottom).

And I managed to give the current thumbnail image a class, called 'currentthumb'.

Now I just need to make that ScrollTo function happen on page load and not on a click event, right? This looks to be easier, no?

Thanks.

来源：https://stackoverflow.com/questions/2008929/centre-thumbnail-in-scrollbar-jquery