html - página - ¿Hay una manera de margen de un ancla en css?

cómo se hace un ancla en html

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 ancla aparece bajo mi encabezado fijo y pierdo 50px de contenido (necesito desplazarme hacia arriba de 50px para leer el contenido debajo del encabezado).

¿Hay una manera de margen de un ancla de 50px? Mi cuerpo está lleno de una gran cantidad de cajas (divs) con un margen entre ellos, por lo que no puedo colocar una div vacía de 50px y luego anclarla después de ella ...

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

Es un tema antiguo, lo sé, pero tal vez otras personas tengan la misma pregunta.

Una Oportunidad es establecer un relleno superior para cada división anclada de esta manera:

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

Ahora su desplazamiento de anclaje llegará al cuadro sin ningún contenedor vacío antes, y el relleno que agregue en CSS le dará el espacio para mostrar el contenido directamente debajo de su encabezado.

Answer 2

Para la solución Pure CSS solo use otro div con margen opuesto :)

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

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

Answer 3

Si el encabezado es realmente fijo, coloque sus anclas en un div desplazable. Luego, el div que contiene el ancla se desplazará en lugar de toda la página. Visita el violín y haz clic en ancla1. Va a anclar2. Etcétera.

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

css: establece el desbordamiento oculto en el cuerpo para evitar el desplazamiento predeterminado. Utilice la posición absoluta en el área de contenido nueva con los conjuntos superior e inferior. Esto lo obliga a estirarse para ajustarse a la ventana de visualización 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 4

Si usas jQuery, usas 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'');
            }
        });
    }
}

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