miniature centre dans la barre de défilement (jQuery)

Question

S'il vous plaît consulter cette page: http://onomadesign.com/wordpress/identity-design/hans-appenzeller/

Les vignettes sur la droite, un lien vers les différents éléments du portefeuille (messages simples Wordpress). Je veux que la vignette du projet actif soit centrée verticalement dans la barre de défilement lorsque l'utilisateur entre dans la page. En ce moment, il réinitialise la barre de défilement, de sorte que les gens perdent de vue la navigation. Comment accomplir cela en utilisant jQuery?

Merci.

Answer 1

ajoutez d'abord la classe de « sélectionné » à la li du lien actuel et utiliser cette classe pour ajouter votre marge plutôt que css en ligne

On dirait que vous utilisez le jScrollPlane Plugin. Ce qui vous permettra de faire quelque chose comme ça avec votre code actuel.

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

Voir cette fonctionnalité page for the jScrollPlane scrollTo

Answer 2

Essayez et signaler ce qui se passe, je suis incapable de tester moi-même:

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

Notez que ce besoin d'une certaine amélioration, mais vous devez confirmer que cette fonctionne dans votre cas – Je devine juste sur la partie de volet de défilement selon la documentation de jScrollPane.

Answer 3

J'ai découvert que le plugin jScrollPane possède sa propre fonction ScrollTo: http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html. Même avec les sélecteurs jQuery (en bas).

Et j'ai réussi à donner à l'image miniature actuelle une classe, appelée 'currentthumb'.

Maintenant, j'ai juste besoin de faire que la fonction ScrollTo se produise au chargement de la page et non sur un événement de clic, non? Cela semble être plus facile, non?

Merci.