web-dev-qa-db-fra.com

Changer la position de départ par défaut de #anchor

J'ai une URL avec une ancre qui fonctionne comme il se doit:

site.com/item/id#comment-233

Lorsqu’elle est ouverte, l’ancre sera positionnée exactement au haut de la page.

Comment changer le point de départ? Disons que je veux que ce soit 50px du haut. 

J'en ai besoin parce que j'ai des calques fixes en haut de la page. Le commentaire apparaît donc superposé derrière l'en-tête fixe div. 

Juste au cas où, en raison de la conformité entre navigateurs, je préfère une solution qui n'implique pas de changer le conteneur du commentaire en fixe et de positionner le haut moins la hauteur de l'en-tête. 

javascriptjqueryhtmlcss
32
Martin

En supposant que votre balise <a> n’ait pas de contenu, ajoutez une classe à cette balise avec un position:relative; top:-50px;

En fonction de votre document, vous devez également l’envelopper dans un <div> absolu 

Cela devrait être compatible avec tous les navigateurs s'il est correctement implémenté.

MODIFIER

C’est le test que j’ai fait localement et qui fonctionne très bien avec FF 3.6.

<html>

    <body style='margin:0; padding:0;'>
        <div style='position:fixed; height:50px; background-color:#F00; width:100%'>
        Fixed header
        </div>
        <div style='padding-top:50px'>
            <div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>
                <a name='linkhere' style='position:relative; top:-75px;'></a>
            Link here</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
        </div>
    </body>
</html>
24
Damp

Cela a fonctionné un festin pour moi, basé sur la suggestion ci-dessus:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-30px; /* or whatever value you need */
}
10
Mark
.anchor{
  display: block;
  height: 115px; <!--same height as header-->
  margin-top: -115px; <!--same height as header-->
  visibility: hidden;
}

<span class="anchor"></span>
<div>content...</div>

from http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/

7
lincolnge

Ajout de "display: block;" travaillé pour moi:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-50px;
    display: block;
}
6
Allan Berger

Ce code fonctionne sur Firefox, Chrome, IE et probablement d'autres aussi:

<a id="comment-3" class="shifted_anchor">&nbsp;</a>
<div>
    ... comment ...
</div>

Où est la feuille de style:

a.shifted_anchor {
  position: relative;
  top: -35px;
  margin: 0;
  padding: 0;
  float: left;
}

La clé est l'attribut float: nous l'utilisons pour éviter l'espace vertical supplémentaire provoqué par &nbsp;, qui est à son tour nécessaire pour la compatibilité entre navigateurs.

4
danieleds

J'ai donc combiné quelques idées ici et en ai trouvé une qui fonctionne bien pour moi et pour tous les navigateurs. Les ancres vides ne semblent pas bien fonctionner avec les navigateurs Webkit, mais ne fonctionnent certainement pas sous Chrome. L'ajout d'un pseudo-élément à l'ancre corrige ce problème sans casser les dispositions.

a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
  content:"";
  float: left;
  height: 0px;
}

Il suffit de remplacer $offsetHeight par tout ce dont vous avez besoin.

0
Chris Nicola