javascript - queryselector - Desplace el elemento a la parte superior de la página haciendo clic en anclar dentro del elemento o en cualquier lugar dentro que contenga el ID de div
obtener elemento por name javascript (1)
No sé si lo hiciste, pero tienes que incluir jQuery para usarlo. Otra cosa sería que su "escucha de clics" tiene que estar en la función de preparación de documentos de jqueries como esta:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(''#scroll_navigation ul li'').on(''click'', function(){
$(''html,body'').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>
Me gustaría desplazarme por la página hasta la parte superior de la ID de div. De navegación al hacer clic en cualquiera de los enlaces dentro de la ID de div de navegación o (si es posible) al hacer clic en cualquier lugar de la propia ID de div que contiene los enlaces de navegación.
He investigado esto y lo más cerca que he estado es jQuery: ¿Cómo desplazar un ancla a la parte superior de la página cuando se hace clic? sin embargo, por alguna razón, no parece funcionar cuando intento hacer esto en mi ejemplo. ¿Qué estoy haciendo mal?
Soy nuevo en jQuery y medium en html y css (y utilicé el estilo en línea de los divs ya que no quería proporcionar un css por separado solo para el ejemplo).
Cuando cargo el html y el script de jQuery - ¿Cómo desplazar un ancla a la parte superior de la página cuando se hace clic? en Aptana tampoco se desplaza. Incluso con un div de contenido por encima del trabajo de clase div, de modo que haya espacio para desplazarse en absoluto.
He incluido dos pequeños párrafos dentro de los divs correspondientes para explicar exactamente lo que quiero decir.
Cualquier ayuda es muy apreciada. Gracias.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(''#scroll_navigation ul li'').click(function() {
$(''html,body'').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li><a href="#Portfolio" title="">Portfolio</a></li>
<li><a href="#Services" title="">Services</a></li>
<li><a href="#About" title="">About</a></li>
<li><a href="#Contact" title="">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDITAR Ten cuidado con esto cuando uses scrollTop en Firefox. Animate scrollTop no funciona en firefox jQuery scrollTop: no hay soporte para valores negativos en Mozilla / Firefox Me tomó un tiempo descubrir que mi código estaba bien, pero scrollTop era este problema en FF. En este mismo ejemplo también se puede observar el comportamiento. Cuando se desplaza hacia abajo y se fijan los anclajes, FF se desplazará hacia posiciones aleatorias, ya sea 2-4px antes o después de la división de destino.
Ahora estoy usando Scrolld.js para lograr un desplazamiento perfecto de píxeles a los puntos deseados en los principales navegadores. No entiendo cómo los diferentes motores de navegador pueden representar una cosa tan común como scrollTop desde diferentes entradas (ya sea html o body), según tengo entendido y soy nuevo en jQuery. Supongo que esto no es "culpa" de jQuery, sino de cómo los motores de los navegadores generan scrollTop.