C'è un modo per marginare un'ancora in css?

Question

Ho un'altezza di intestazione fissa 50px. Nel mio corpo, ho molte ancore. Il problema è che, quando clicco su collegamenti che puntano ad ancore, l'ancora appare sotto la mia intestazione fissa e perdo 50px di contenuto (ho bisogno di scorrere verso l'alto di 50px per leggere il contenuto sotto l'intestazione).

C'è un modo per ridurre un'ancora di 50 px? Il mio corpo è riempito con un sacco di scatola (div) con un margine tra themself, quindi non posso mettere in atto un div vuoto di 50px e poi ancorare dopo che ..

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; 
} 

Answer 1

Se l'intestazione è veramente fissato quindi posizionare le ancore in un div scorrevole. Quindi il div contenente l'ancora scorrerà al posto dell'intera pagina. Visita il violino e clicca su anchor1. Va ad ancora2. E così via.

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

css - set di overflow nascosto sul corpo per evitare lo scorrimento di default. Usa la posizione assoluta nella nuova area del contenuto con il set superiore e inferiore. Questo lo costringe ad allungarsi per adattarsi alla finestra restante della finestra.

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>​ 

Answer 2

Se si utilizza jQuery, si utilizza questa funzione:

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'); 
      } 
     }); 
    } 
} 

quindi aggiungere la classe "jquery_anchor" per l'ancora

Answer 3

Per la soluzione Pure CSS basta usare un altro div con margine opto :)

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

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