web-dev-qa-db-fra.com

Existe-t-il un moyen de mettre une ancre en marge dans les CSS?

J'ai une hauteur d'en-tête fixe 50px. Dans mon corps, j'ai beaucoup d'ancres. Le problème est que, lorsque je clique sur des liens pointant vers des ancres, celle-ci apparaît sous mon en-tête fixe et je perds 50px de contenu (je dois faire défiler 50px pour lire le contenu sous l'en-tête).

Y a-t-il moyen de placer une ancre de 50px en marge? Mon corps est rempli de beaucoup de div avec une marge entre eux, donc je ne peux pas mettre en place un div vide de 50px et ensuite ancrer après.

html:

<div id="header"></div>
<div id="content">
     <div class="box" id="n1"></div>
     <div class="box" id="n2"></div>
     <div class="box" id="n3"></div>
</div>

css:

#header{
    height: 40px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: fixed;
    text-align: center;
    z-index:2;
}

#content{
    padding-top: 50px; 
    margin: 0px;
}

.box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    vertical-align : top;
    padding: 1.4%; /* Keep it in percent (%) */
    margin-bottom: 30px;
    min-height: 200px;
}
htmlcssanchor
17
Pier-Alexandre Bouchard

Si l'en-tête est vraiment fixe, placez vos ancres dans un div à défilement. Ensuite, le div contenant l’ancre défilera à la place de la page entière. Visitez le violon et cliquez sur anchor1. Il va à anchor2. Et ainsi de suite.

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

css - définit le débordement masqué sur le corps pour empêcher le défilement par défaut. Utilisez la position absolue sur la nouvelle zone de contenu avec les ensembles haut et bas. Cela l'oblige à s'étirer pour s'adapter à la fenêtre d'affichage restante.

body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; }
#content { 
    overflow: scroll; 
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100%;
    border: 1px solid blue; 
}

html

<div id="header">header</div>
<div id="content">
    <div>
        Page Content <br />
        <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>                
        <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a>   
    </div>
</div>​
6
mrtsherman

Si vous utilisez jQuery, vous utilisez cette fonction:

function scrollToAnchor() {
    if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){
    var anchor = document.URL.split("#")[1];
    $(".jquery-anchor").each(function() {
        if($(this).attr("name") == anchor) {
            $("html,body").animate({
                    scrollTop: $(this).offset().top - 50},
                'slow');
            }
        });
    }
}

puis ajoutez la classe "jquery_anchor" à votre ancre

5
ndemoreau

Pour la solution Pure CSS, utilisez simplement une autre div avec une marge vide :)

<style>
.anchor {
     margin-top: -50px; 
     margin-bottom: 50px;
}
</style>

<div id="n1" class="anchor"></div>
<div class="box"></div>
2
Arziel

C'est un vieux fil, je sais - mais peut-être que d'autres personnes ont la même question.

Une opportunité définit un remplissage supérieur pour chaque div ancrée comme ceci:

.box {padding-top: 50px; ...}

Maintenant, votre défilement d'ancrage atteindra la boîte sans aucun conteneur vide auparavant, et le remplissage que vous ajoutez dans CSS vous donnera l'espace nécessaire pour afficher le contenu directement sous votre en-tête.

0
user10301101