Il y a peu de temps, nous avons publié un article pour vous apprendre à mettre en place des ancres de lien.

Le problème avec les ancres de base, c’est qu’il n’y a pas de gestion quand l’en-tête est fixé à l’écran. C’est-à-dire que lors du déplacement vers l’ancre, l’en-tête va se positionner par-dessus le début de la zone ciblée.

Il existe plusieurs façons de gérer le problème, et nous allons voir les deux méthodes les plus communes.

 

Mise en place du contexte

Commençons tout d’abord par créer une page avec des éléments suffisamment grands pour créer un défilement.

<main>
  <h1>Titre de la page</h1>
  <section id="s1">...</section>
  <section id="s2">...</section>
  <section id="s3">...</section>
  <section id="s4">...</section>
</main>

section {
  background: #eaf0f8;
  margin-bottom: 30px;
  padding: 15px;
}
#s1 {
  height: 250px;
}
#s2 {
  height: 650px;
}
#s3 {
  height: 400px;
}
#s4 {
  height: 200px;
}

Sans oublier l’en-tête, sera fixé en haut de l’écran. Tous les liens à l’intérieur du menu seront des ancres vers les différents blocs.

<header>
  <nav>
    <ul>
      <li><a href="#s1">Section 1</a></li>
      <li><a href="#s2">Section 2</a></li>
      <li><a href="#s3">Section 3</a></li>
      <li><a href="#s4">Section 4</a></li>
    </ul>
  </nav>
</header>

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

Vous trouverez ici un exemple complet.

Dans l’état actuel, quand on clique sur un lien dans le menu, nous sommes bien redirigés sur l’élément question, mais le début du bloc n’est pas visible : Il est masqué par l’en-tête.

 

Méthode 1 : remonter le point d’ancrage.

La première méthode que nous allons voir n’est pas la plus propre ni la plus simple à mettre en place, mais c’est la plus basique. Elle ne demande pas de librairie ni de Javascript, seulement un peu de méthodologie. Il suffit tout simplement de remonter le point d’ancrage !

Si on prend l’un de nos blocs, dans l’état actuel, il contient un id et un titre.

<section id="s1">
  <h2>Section 1</h2>
</section>

Eh bien dans ce bloc, nous allons ajouter un élément, tout simplement un span, dans lequel nous allons déplacer l’id. Attention de ne pas oublier de modifier le CSS.

<section class="s1">
  <span class="marker" id="s1"></span>
  <h2>Section 1</h2>
</section>

.s1 {
  height: 250px;
}

Grâce au positionnement relatif et absolu, nous allons remonter le span contenant l’id. Le but est que celui-ci soit remonté au-dessus du bloc avec un nombre de pixels équivalent à la hauteur de l’en-tête. C’est grâce à cela que l’en-tête ne passera plus par-dessus le bloc ciblé.

.marker {
  position: absolute;
  top: -60px;
}

Dans cet exemple, les span ont été transformés en points rouges afin que l’on comprenne mieux ce qu’il se passe.

 

Méthode 2 : avec du javascript

Une autre façon de faire, c’est cette fois-ci avec du javascript. Afin d’avoir un rendu plus propre, nous allons utiliser du défilement progressif, ou « smooth scroll ». Si vous ne savez pas le mettre en place, nous vous recommandons de suivre le tutoriel rédigé dédié au défilement progressif.

Le but est d’ajouter un événement click sur les liens du menu, pour faire un défilement progressif vers l’élément ciblé, en y soustrayant la hauteur de l’en-tête.

La hauteur de l’en-tête se calcule facilement : D’abord sélectionner l’en-tête, puis rechercher son outerHeight.

const headerHeight = $('header').outerHeight();

Du coup, lors de l’animation du défilement progressif, nous allons pouvoir soustraire cette hauteur à la position de la zone ciblée.

$(function() {

  const headerHeight = $('header').outerHeight();

  $('nav a').on('click', function(e) {
    e.preventDefault();
    let target = $(this).attr('href');
      $('html, body').animate( {
        scrollTop: $(target).offset().top - headerHeight
      }, 800);
    return false;
  })

})

Vous pouvez jeter un œil à l’exemple.

 

Notre astuce pour gérer une ancre avec un header fixe

Félicitations, maintenant vous connaissez deux méthodes qui vous permettent d’avoir en même temps un header fixe et des ancres de lien sur votre site internet.

Si vous avez du mal à appliquer ces méthodes sur votre site internet, vous pouvez demander à un développeur web d’intervenir. Pour cela rien de plus simple, déposez une annonce gratuitement sur Codeur.com pour recevoir des devis rapidement !