Ancla no a la parte superior de la página, pero 200px abajo

Question

Tengo un anclaje en un elemento que hace que la navegación salte a ese punto. Sin embargo, el ancla se ajusta a la parte superior de la ventana gráfica. Debido a una navegación fija, ahora está oculta detrás.

¿Es posible hacer que el anclaje no encaje en la parte superior de la ventana gráfica y en su lugar 200px en la página?

sitio aquí: http://www.haselden.co.uk/james/docs

Answer 1

Solución sucia para esto, pero funciona, gracias @SteveJenkins por idear esto, aunque agregué una modificación.

<a name="AnchorName" class="anchor">anchor text [invisible]</a> 

.anchor { 
    position: relative; 
    top: -[number]px; 
    visibility:hidden; 
} 

Answer 2

Añadir un elemento hiden 200 píxeles inferior y crea un ancla a la misma vez.

Answer 3

Pude resolver esto aplicando CSS al ancla. Así que para el anclaje Tendría esto ...

<a name="AnchorName" class="anchor"></a> 

Y luego en el CSS que tendría este ...

.anchor { 
    position: relative; 
    top: -[number]px; 
} 

Tenga en cuenta que he notado algunas imprecisiones en qué medida el hipervínculo es el movido en diferentes navegadores. Por lo tanto, podría no ser posible hacer que las cosas se alineen perfectamente. Probablemente necesites un jQuery elegante o algo así si quieres que esté perfectamente posicionado.

Answer 4

Tuve un problema similar y me encontré con esta pregunta. Ninguna respuesta funcionaba como yo quería. Tenía que ir un poco más lejos y quería compartir mis hallazgos.

Un poco de contexto primero. Estaba haciendo un tipo de análisis de errores que resalta áreas interesantes en una página de visualización de código fuente renderizada en HTML. Hay una tabla de índice que permite una navegación rápida, que está en un encabezado fijo de altura variable. Lo que explica por qué terminé en esta página de preguntas.

Mi problema era que el ancla se tomando el espacio visual ymover el código fuente en torno, cambiando el texto por la longitud del ancla y de jugar con el formato de código. Intenté varias formas de hacerlo NO tomar espacio, pero todavía existe en la página para que funcione el anclaje. Al final, en lugar de un . (según el comentario de @noregt), me conformé con , que sería el carácter de retroceso.

Cada anclaje se genera dinámicamente como <a name="[some unique name]" class="anchor">&#008;</a> y luego se hace referencia en el encabezado fijo.

Un poco de Javascript ayuda con la altura del encabezado dinámico y anclajes de posicionamiento (coge todos los anclajes y ajustar el relleno superior de forma dinámica):

<script type="text/javascript"><!-- 
var height = document.getElementById("head").offsetHeight; 
var a = document.getElementsByClassName('anchor'); 
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
for(key in a) { 
    if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) { 
     a[key].style.paddingTop = height + 'px'; 
    } 
} 
--></script> 

Esta solución funciona perfectamente para anclajes generados dinámicamente con una altura variable pero fijo el encabezado. Espero que esto pueda ayudar a alguien más.

Answer 5

Esto es mucho más fácil ahora con CSS3. La explicación larga está aquí: https://css-tricks.com/hash-tag-links-padding/ pero la versión corta es

a::before { 
    display: block; 
    content: " "; 
    margin-top: -70px; 
    height: 70px; 
    visibility: hidden; 
}