Tengo una URL con un ancla que funciona como debería:
site.com/item/id#comment-233Cuando se abre, el ancla se colocará exactamente en la parte superior de la página.
¿Cómo cambio el punto de partida? Digamos que quiero que esté 50px por debajo de la parte superior.
La razón por la que necesito esto es porque tengo capas fijas en la parte superior de la página, por lo que el comentario aparece superpuesto detrás del div del encabezado fijo.
Por si acaso, debido a la compatibilidad entre navegadores, prefiero una solución que no implique cambiar el contenedor del comentario a fijo y posicionar la parte superior menos la altura del encabezado.
Suponiendo que su etiqueta <a> no tiene contenido, agregue una clase a su etiqueta con una position:relative; top:-50px;
Dependiendo de su documento, también debe envolverlo en un <div> absoluto
Esto debería ser compatible con varios navegadores si se implementa correctamente.
EDITAR
Esta es la prueba que he hecho localmente y funciona bien en FF 3.6
<html> <body style='margin:0; padding:0;'> <div style='position:fixed; height:50px; background-color:#F00; width:100%'> Fixed header </div> <div style='padding-top:50px'> <div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'> <a name='linkhere' style='position:relative; top:-75px;'></a> Link here</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div> </div> </body> </html>Esto funcionó de maravilla para mí, basado en la sugerencia anterior:
<a name="[my-anchor-name]" class="anchor"></a> .anchor { position:relative; top:-30px; /* or whatever value you need */ }.anchor{ display: block; height: 115px; <!--same height as header--> margin-top: -115px; <!--same height as header--> visibility: hidden; } <span class="anchor"></span> <div>content...</div>de http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/