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.
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>
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 */
}
.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/
Ajout de "display: block;" travaillé pour moi:
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-50px;
display: block;
}
Ce code fonctionne sur Firefox, Chrome, IE et probablement d'autres aussi:
<a id="comment-3" class="shifted_anchor"> </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
, qui est à son tour nécessaire pour la compatibilité entre navigateurs.
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.