¿Hay alguna forma de anclar un ancla en css?

Question

Tengo una altura de cabecera fija de 50px. En mi cuerpo, tengo muchas anclas. El problema es que, cuando hago clic en los enlaces que apuntan a los anclajes, el anclaje aparece debajo de mi encabezado fijo y pierdo 50px de contenido (necesito desplazarme hacia arriba de 50px para leer el contenido debajo del encabezado).

¿Hay alguna manera de anclar un ancla de 50px? Mi cuerpo está lleno de un montón de caja (divs) con un margen entre sí mismos, por lo que no se puede poner en marcha un div vacío de 50 px y luego anclar después de que ..

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

Si la cabecera es realmente fija a continuación, colocar sus anclas en un div desplazable. Entonces, el div que contiene el ancla se desplazará en lugar de la página completa. Visita el violín y haz clic en anchor1. Va a anclar2. Etcétera.

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

css - establecer desbordamiento oculta en el cuerpo para prevenir el desplazamiento predeterminado. Utilice la posición absoluta en el nuevo área de contenido con el conjunto superior e inferior. Esto lo obliga a estirar para ajustarse a la ventana de ventana gráfica 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>​ 

Answer 2

Si utiliza jQuery, utiliza esta función:

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

continuación, agregue la clase "jquery_anchor" a su ancla

Answer 3

Para la solución CSS puro solo use otro div con margen de oposición :)

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

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