JQuery – élément de défilement au milieu de l'écran au lieu d'en haut avec un lien d'ancrage

Je construis un site d'une page avec une barre de navigation à position fixe qui se déplace en douceur vers les différents éléments de section par l'intermédiaire de liens d'ancrage. Le comportement par défaut pour défiler vers un élément est de l'aligner en haut de la fenêtre du navigateur. Au lieu de cela, je souhaite aligner l'élément au milieu de l'écran.

J'utilise ce balisage pour la navigation:

<nav class="main-nav"> <a href="#top">Top</a> <a href="#section-1">Section 1</a> <a href="#section-2">Section 2</a> <a href="#section-3">Section 3</a> <a href="#section-4">Section 4</a> <a href="#section-5">Section 5</a> </nav> 

J'utilise le plugin JQuery Smooth Scroll de kswedberg pour lisser le défilement. Je l'initie comme ceci:

 $('.main-nav a').smoothScroll({ offset: 0, speed: 700 }); 

Je souhaite configurer le décalage pour être ((window).height / 2) - (element height / 2) afin qu'il soit centré verticalement, mais j'ai besoin d'aide pour savoir comment l'exécuter correctement.

• Comment configurer une variable de session dans jquery?
• La meilleure façon d'exécuter js uniquement sur une page spécifique
• Opposé à <noscript>
• Dessiner lignes sur la page html
• Demander un fichier avec un en-tête personnalisé

J'ai besoin de ça pour:

• Obtenez la hauteur de la fenêtre et divisez-la par deux
• Obtenez la hauteur de l'élément et divisez-le par deux
• Soustraire le premier de ce dernier
• Si possible, alignez-le sur le haut comme par défaut si l'élément est supérieur à la fenêtre

Étant donné qu'il existe de nombreux liens d'ancrage, je suppose que je dois vérifier la hauteur de l'élément, le lien d'ancrage auquel ont été cliqués, ou lancer smoothScroll pour chaque lien d'ancrage.

Est-ce que quelqu'un sait comment faire cela?

• Est-ce qu'un src iframe vide est valide?
• Remplacer la page actuelle par un contenu ajax
• Focus JQuery
• HTML SELECT – Changez l'option sélectionnée par VALUE en utilisant JavaScript
• Comment puis-je obtenir mon accordéon à charger avec tous les menus fermés?

 $('.main-nav a').on('click', function(e) { var el = $( e.target.getAttribute('href') ); var elOffset = el.offset().top; var elHeight = el.height(); var windowHeight = $(window).height(); var offset; if (elHeight < windowHeight) { offset = elOffset - ((windowHeight / 2) - (elHeight / 2)); } else { offset = elOffset; } $.smoothScroll({ speed: 700 }, offset); return false; }); 

  $('.main-nav a').on('click', function(e) { var el = $( e.target.getAttribute('href') ); var elOffset = el.offset().top; var elHeight = el.height(); var windowHeight = $(window).height(); var offset; if (elHeight < windowHeight) { offset = elOffset - ((windowHeight / 2) - (elHeight / 2)); } else { offset = elOffset; } var speed = 700; $('html, body').animate({scrollTop:offset}, speed); });