Enlace de anclaje aterrizando en la posición incorrecta

Question

Probablemente una pregunta estúpida, pero sinceramente no puedo entender lo que está pasando mal aquí.

http://harrisonfjord.com/thinkinc/

Un sitio que estoy construyendo en este momento. Quiero hacer un enlace de anclaje al http://harrisonfjord.com/thinkinc/index.php#sponsors. He configurado el ancla que se produzca justo antes en el siguiente código:

<a name="sponsors"></a> 
    <div class="sponsors"> 
     <div class="sponsors-left"> 
      <h2>Sponsors</h2> 
       <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p> 
      </div> 

Sin embargo, cuando se hace clic en el enlace de ancla cae a mitad de la div. Pensé que podría haber sido un problema con la carga de imágenes después de que se cargue el enlace de anclaje, por lo que coloqué manualmente anchos/alturas para todas las etiquetas. También hice lo mismo para el reemplazo de texto de cufon en la barra de título.

Nada de eso ayudó, así que ahora me dirijo a ustedes. El ancla tampoco funciona en Firefox, por la razón que sea. ¿Alguna idea sobre lo que he hecho mal aquí?

¡Salud!

Answer 1

Creo que el problema se debe a los anclajes sin contenido que está utilizando.

También, parece que name= ha sido deprecated in favor de id= como un identificador de fragmento en ciertos elementos (incluyendo A) que hace que una especie de sentido como atributos de identificación son únicos mientras que los atributos nombre no están tan garantizados.

que iba a tratar se pegue el identificador de fragmento en la entidad renderable real tales como:

<h2 id="sponsors">Sponsors</h2> 

y ver a dónde te lleva. Por cierto, parece una buena conferencia, espero que obtengas una admisión de comp.

Answer 2

No sé lo que su página estándar está tratando de conformar, pero está lleno de errores:

http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Algunos de ellos tan graves, por ejemplo:

• ¡No se puede determinar el modo Parse!
• No se encontró DOCTYPE y el elemento raíz desconocido. Cancelando la validación

que el validador se da por vencido. En contraste con una página como gnu.org

http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0

Debe estar satisfecho de que el sitio se muestra en absoluto.

Answer 3

que tiene un problema en el iPhone de vínculos con fragmentos, teniendo <a href="#info">TYPES OF INFORMATION WE COLLECT</a>, que une correctamente a <h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.

que no estaba funcionando correctamente, y me fijo con una solución como esta (usando jQuery):

window.scrollTo(0,$('#info').offset().top); 

Answer 4

Tengo el mismo problema exacto en Firefox y lo resolvió con este (igual que la respuesta sasi pero más genérico - es detectar si hay un ancla en la url y desplazarse a él):

$(document).ready(function() { 
    if(window.location.hash.length > 0) { 
     window.scrollTo(0, $(window.location.hash).offset().top); 
    } 
}); 

parece que es un problema bien conocido, ver https://bugzilla.mozilla.org/show_bug.cgi?id=60307