Lo has visto antes, haces clic en un enlace en la navegación y no te lleva a otra página sino a un punto específico dentro de la página actual. ¿Cómo se logra esto? Con un HTML extremadamente básico que puedes recoger en unos segundos!
Para ir más lejos, también veremos cómo animar la transición usando un poco de jQuery.
Enlace interno: La esencia
Como expliqué en la introducción, hoy aprenderemos un truco básico y luego veremos cómo hacerlo aún mejor. Cuando aprendí diseño web por primera vez, esta fue una de esas cosas que siempre me dije a mí misma que tenía que averiguar, pero siempre postergar el aprendizaje: si estás en el mismo barco, este artículo es para ti.
Demo en vivo: Haga clic aquí
Un cuento de dos enlaces
Como probablemente pueda adivinar, los enlaces a una sección interna en su página requieren no uno sino dos enlaces. Primero, desea agregar el enlace que servirá como el ancla al que se desplazará, luego crea el enlace estándar en el que se puede hacer clic como lo haría normalmente y lo dirige al primer enlace. ¿Tener sentido? Si no, no te preocupes, es más fácil de lo que piensas.
Para la primera parte, digamos que estamos poniendo un enlace en un pie de página que se desplazará a la parte superior de la página, una práctica común en páginas más largas. Para insertar este enlace, usamos una sintaxis con la que puede o no estar familiarizado:
Observe que en lugar del típico? Un href ?, usamos? Un nombre ?. Esto es importante y es un punto en el que es probable que se tropiece si está acostumbrado a insertar enlaces con el primero. Puedes elegir lo que quieras por el nombre, solo recuerda que es mejor usar algo descriptivo como lo hemos hecho aquí. Además, asegúrese de tomar nota del nombre que usa, porque tendremos que volver a referirlo en el siguiente paso.
Una vez que tenga ese enlace listo, es hora de insertar el ancla. Esencialmente, si desea desplazarse a un punto específico de una página, debe insertar un poco de código en ese punto para que el enlace que acabamos de crear sepa dónde ir.
Como queremos enlazar a la parte superior de la página, insertaremos este fragmento en la parte superior de nuestro HTML.
Hay un par de cosas importantes para tomar nota de aquí. En primer lugar, agregamos un hashtag al comienzo del nombre del enlace. Esto no aparece en el primer enlace, pero es necesario en el segundo. Además, la parte de texto de este enlace se ha dejado en blanco. Esto no es necesario, pero de hecho es una opción. La mayoría de las veces, es probable que se vincule a un elemento que ya está en su diseño, por lo que habrá contenido aquí.
Construyendo la demo
Ahora que comprende la sintaxis, es hora de crear una página web básica utilizando lo que hemos aprendido. Obviamente, necesitaremos construir una página que sea lo suficientemente larga como para tener que desplazarse. Para ello, comencemos lanzando algunos bloques grandes de texto, cada uno con su propio título.
Los cuatro titulares deberían proporcionarnos cuatro posibles lugares para desplazarnos hasta que estemos perfectamente preparados. Desde aquí queremos agregar en los enlaces nombrados los elementos h1.
Iniciando CSS
Ahora agregamos un estilo básico para este texto. Todo lo que realmente he hecho es diseñar las fuentes y agregar un poco de margen a cada sección para distribuirlas bien.
Así es como se ven los párrafos resultantes. Súper simple, pero harán el trabajo para lo que necesitamos.
Imagen de navegación y encabezado
Para navegar a los anclajes, necesitaremos crear una serie de enlaces en nuestro html usando el método de hashtag al principio de este artículo. También incluiremos una imagen de marcador de posición para darnos un poco más de espacio para el desplazamiento.
Demo finalizada: HTML puro / CSS
Con eso, nuestra demo de enlace interno está completa! Haga clic en cualquiera de los enlaces en la navegación y deberían llevarlo a ese punto de la página. Tenga en cuenta que, para los anclajes que se encuentran cerca de la parte inferior de la página, el rollo simplemente baja todo lo que puede.
Demo en vivo: Haga clic aquí
Animando el desplazamiento
Con HTML, el enlace de ancla funciona, pero la transición es bastante dura.No hay animación en absoluto, la página simplemente salta al ancla al hacer clic. ¿Qué sucede si queremos que esto sea un efecto más gradual para que el usuario pueda ver claramente que la página se está desplazando hacia abajo?
Podría realizar la operación completa de vinculación y desplazamiento en JavaScript, pero creo que es una mala idea simplemente porque está limitando innecesariamente la cantidad de personas que pueden usar su sitio a las que tienen activado JavaScript. En su lugar, es mucho mejor configurar el enlace en HTML exactamente como lo hemos hecho aquí y luego agregar el efecto de animación para los usuarios de JavaScript. El sitio seguirá funcionando para cualquier persona con JS desactivado, simplemente no verán la animación.
Para lograr esto, necesitamos tres cosas. El primero es, por supuesto, jQuery porque es increíble y hace que todo sea más fácil. El segundo es un plugin jQuery extremadamente útil de Ariel Flesler llamado ScrollTo y, finalmente, necesitará una rama de ScrollTo llamada LocalScroll.
Esto suena complicado pero es super simple. LocalScroll se creó con el único propósito de animar el desplazamiento del enlace de ancla, por lo que es la herramienta perfecta para el trabajo. ¡También es, con mucho, la solución más fácil de implementar que pude encontrar! Lo primero que debe hacer es descargar LocalScroll e insertarlo junto con jQuery en su HTML (ScrollTo también se incluirá en la descarga).
Luego, debemos pasarle el elemento principal que contiene los enlaces del hashtag. En nuestro caso, el #nav div contiene los enlaces, así que lo insertaremos en el siguiente fragmento de código:
Todo lo que necesita hacer para implementar esto en sus propios proyectos es cambiar el objetivo y, si lo desea, especificar una duración para la animación. ¡Eso es! Este pequeño bloque de texto se encarga del efecto de desplazamiento animado para nosotros.
Demo finalizada: Animado con JavaScript
Aquí está la versión dos de nuestra demostración, esta vez con el lanzamiento mágico de JavaScript. Compárela con la versión anterior para ver qué tan agradable se siente el efecto con la transición.
Demo en vivo: Haga clic aquí
Conclusión
Para concluir, recuerde que vincular a un punto de desplazamiento dentro de su página es fácil con HTML puro. Todo lo que necesita hacer es configurar un enlace con nombre que se adjunta a un lugar específico y un enlace en el que se pueda hacer clic para llegar allí.
Después de eso, si desea que la transición sea más gradual, use jQuery y LocalScroll juntos. Asegúrese de especificar tanto el contenedor primario para sus enlaces como la duración de la animación.