Faire en sorte que le lien d'ancrage soit placé quelques pixels au-dessus de l'endroit où il est lié.

Question

Je ne suis pas sûr de la meilleure façon de poser cette question ou de la rechercher :

Lorsque vous cliquez sur un lien d'ancrage, vous accédez à la section de la page concernée, la zone à laquelle le lien renvoie se trouvant désormais tout en haut de la page. Je voudrais que le lien d'ancrage me renvoie à cette partie de la page, mais j'aimerais avoir un peu d'espace en haut. En d'autres termes, je ne veux pas qu'il m'envoie à la partie liée à la page en la plaçant TRÈS EN HAUT, mais j'aimerais qu'il y ait environ 100 pixels d'espace à cet endroit.

Cela a-t-il un sens ? Est-ce possible ?

Modifié pour montrer le code - c'est juste une balise d'ancrage :

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

Answer 1

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

Cela permettra au navigateur de faire le travail de saut vers l'ancre pour nous et nous utiliserons ensuite cette position pour nous décaler.

EDIT 1 :

Comme l'a fait remarquer @erb, cela ne fonctionne que si vous êtes sur la page lorsque le hachage est modifié. Entrer dans la page avec un #something déjà dans l'URL ne fonctionne pas avec le code ci-dessus. Voici une autre version pour gérer cela :

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

NOTE : Pour utiliser jQuery, vous pouvez simplement remplacer window.addEventListener avec $(window).on dans les exemples. Merci @Neon.

EDIT 2 :

Comme l'ont fait remarquer quelques personnes, la méthode ci-dessus échouera si vous cliquez sur le même lien d'ancrage deux ou plusieurs fois de suite, car il n'y a pas d'effet de levier. hashchange pour forcer le décalage.

Cette solution est une version très légèrement modifiée de la suggestion de @Mave et utilise des sélecteurs jQuery pour plus de simplicité.

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

JSFiddle pour cet exemple est aquí

Answer 2

En travaillant uniquement avec css, vous pouvez ajouter un padding à l'élément ancré (comme dans la solution ci-dessus). Pour éviter les espaces blancs inutiles, vous pouvez ajouter une marge négative de la même hauteur :

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

Je ne suis pas sûr que ce soit la meilleure solution dans tous les cas, mais cela fonctionne bien pour moi.

Answer 3

Voici la réponse de 2020 à cette question :

#anchor {
  scroll-margin-top: 100px;
}

Porque il est largement soutenu !

Answer 4

Une solution encore meilleure :

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

Il suffit de positionner le <a> avec un positionnement absolu à l'intérieur d'un objet positionné de manière relative.

Fonctionne en entrant dans la page ou par un changement de hash dans la page.

Answer 5

Cela fonctionnera sans jQuery et au chargement de la page.

(function() {
    if (document.location.hash) {
        setTimeout(function() {
            window.scrollTo(window.scrollX, window.scrollY - 100);
        }, 10);
    }
})();