html - ejemplos - Posición de anclaje interno en Firefox móvil(en Android)
metadatos html ejemplos (2)
Tengo una página de inicio con varias secciones, cada una de ellas está vinculada desde el menú principal:
<body>
<header>
<!-- nav used on all pages -->
<a href="#nav" class="toggle-nav">
menu <i class="fa fa-bars"></i>
</a>
<nav class="main-nav" id="nav">
<a href="/#item1">Link</a>
<a href="/#item2">Link</a>
</nav>
</header>
<!-- homepage -->
<main>
<section id="item1">some content here </section>
<section id="item2">some other content here </section>
</main>
</body>
(posiblemente) css relevante:
body {
position: relative;
overflow-x: hidden;
}
@media only screen and (max-width: 750px) {
header .main-nav a {
display: block;
}
.tiggle-nav {
display: none;
}
}
La idea es que debería poder hacer clic en ''Elemento 1'' en el menú de todo el sitio y acceder a esa sección particular de la página de inicio.
Esto funciona muy bien, excepto en Firefox para dispositivos móviles, donde al hacer clic en el enlace de anclaje interno de la página principal desde cualquier otra página interna, la página de inicio se cargará entre 100 y 200 píxeles lejos de la ubicación deseada.
Curiosamente, si actualizo la página después de que la página principal se haya cargado inicialmente, Firefox Mobile puede encontrar el delimitador interno sin problemas, es decir, esto es solo un problema cuando se navega desde la página interna a la página de inicio.
¿Que está sucediendo aquí? ¿Tiene esto algo que ver con que Firefox Mobile no cargue CSS hasta después de encontrar el anclaje interno?
Y, lo que es más importante, ¿cómo puedo hacer que Firefox Mobile encuentre la ubicación correcta la primera vez?
Cualquier idea muy apreciada.
Full css y html están en vivo en http://whoisnicoleharris.com
He hecho lo siguiente para reproducir el error.
Fui a la página de conexión, y luego hago clic en "Escribir". El posicionamiento está desactivado. Luego deshabilité JavaScript para confiar en el anclaje. Funcionó correctamente
Mi solución es detectar un objeto específico en la página para decidir entre el desplazamiento de JavaScript y el de anclaje directo.
if (document.getElementById(''homepagebookmark'')){
//do scroll
} else {
//leave it be
}
En main.js, cambie 400 a 0 para la parte siguiente:
$(''#top'').click(function(e) {
e.preventDefault();
$(''body,html'').animate({scrollTop:0},400);
});
El código se ve a continuación después del cambio:
$(''#top'').click(function(e) {
e.preventDefault();
$(''body,html'').animate({scrollTop:0},0);
});
Probado aquí, parece que puede resolver el problema, pero no puedo decir por qué exactamente. Debe hacerlo debido a los 400 píxeles adicionales que se agregan sobre el enlace de anclaje.