Surgió muy brevemente en el último video: ¿cómo evitas que el navegador salte hacia abajo cuando haces clic en un enlace hash? Ese es el comportamiento predeterminado del navegador y, afortunadamente, con JavaScript, podemos decirle al navegador que no lo haga.
La forma más sencilla de manejarlo es así:
$("a").on("click", function(event) ( event.preventDefault(); ));Verá que estos enlaces no saltan hacia abajo como podría pensar:
Vea el lápiz a5aeaa4890837ac172605983324d5470 de Chris Coyier (@chriscoyier) en CodePen
Pero ten cuidado con eso, por supuesto. Eso evitará que un enlace hash salte hacia abajo en la página, pero también evitará que un enlace normal vaya a una nueva URL. Así que utilícelo solo en enlaces de anclaje que sepa que desea manejar exclusivamente en su propio JavaScript. Podrías reducir las cosas como $("a(href^='#')"). por ejemplo, "El atributo href del enlace comienza con un hash".
Pero a menudo también verá esto:
$("a").on("click", function() ( return false; ));Y eso logra lo mismo. Lo que está sucediendo aquí es que en return false;realidad está haciendo dos cosas. Está haciendo el event.preventDefault();y está haciendo otra cosa:event.stopPropagation();
Puede usar return false; si lo desea, solo necesita comprender qué es stopPropagation y estar de acuerdo con que lo haga. Por lo general, creo que es mejor no detener la propagación a menos que sepa que desea hacerlo específicamente. Lo que hace es detener el "burbujeo" del evento DOM. Por ejemplo, si tu DOM es así:
- Home
- About
- Clients
- Contact Us
Luego, hace clic directamente en la palabra "Inicio", ese evento de clic se activará en el enlace de anclaje, luego aparecerá en el elemento de la lista, luego en la lista desordenada, luego en el elemento de navegación, todo el camino hacia arriba. al documento en sí.
Cuando detiene la propagación, en cualquier evento del elemento en el que lo ejecute, el burbujeo se detendrá allí. ¡Solo ten cuidado!
Escribí más sobre esta diferencia aquí.
Hacia el final del video, hablo de evitar el desplazamiento en un elemento mediante preventDefault. Estaba totalmente equivocado en que pudieras hacer eso. Da la casualidad de que es un evento que no puedes detener así. Hay formas de evitarlo, como usar CSS (lo overflow: hidden;que puede ser extraño) o ser bastante sofisticado.