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

La meilleure solution

<span class="anchor" id="section1"></span>
<div class="section"></div>

<span class="anchor" id="section2"></span>
<div class="section"></div>

<span class="anchor" id="section3"></span>
<div class="section"></div>

<style>
.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}
</style>

Answer 2

Cette solution purement CSS fonctionne pour moi.

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Je l'ai trouvé ici -> https://www.wikitechy.com/tutorials/javascript/offsetting-an-html-anchor-to-adjust-for-fixed-header

Voici un violon : https://jsfiddle.net/e8o2p3az/

Answer 3

Essayez ce code, il a déjà une animation douce quand on clique sur le lien.

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
    }, 500);
});

Answer 4

Pour créer un lien vers un élément, et ensuite "positionner" cet élément à une distance arbitraire du haut de la page, en utilisant du pur CSS, il faudrait utiliser padding-top De cette façon, l'élément est toujours positionné en haut de la fenêtre, mais il n'y a pas d'erreur. apparaît de manière visible, pour être positionné à une certaine distance du haut du hublot, par exemple :

<a href="#link1">Link one</a>
<a href="#link2">Link two</a>

<div id="link1">
    The first.
</div>

<div id="link2">
    The second.
</div>

CSS :

div {
    /* just to force height, and window-scrolling to get to the elements.
       Irrelevant to the demo, really */
    margin-top: 1000px;
    height: 1000px;
}

#link2 {
    /* places the contents of the element 100px from the top of the view-port */
    padding-top: 100px;
}

Démonstration de JS Fiddle .

Pour utiliser une approche JavaScript simple :

function addMargin() {
    window.scrollTo(0, window.pageYOffset - 100);
}

window.addEventListener('hashchange', addMargin);

Démonstration de JS Fiddle .

Answer 5

Cela devrait fonctionner :

    $(document).ready(function () {
    $('a').on('click', function (e) {
        // e.preventDefault();

        var target = this.hash,
            $target = $(target);

       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-49
    }, 900, 'swing', function () {
    });

        console.log(window.location);

        return false;
    });
});

Il suffit de changer le .top-49 pour qu'il corresponde à votre lien d'ancrage.