X
Jhon Marreros Guzmán

Animación de saltos de enlace en WordPress

En un artículo anterior habíamos visto cómo crear saltos de enlace en la misma página en WordPress, en este artículo vamos a complementar esa funcionalidad agregando una animación al scroll del navegador cuando se ubica en el enlace.

 

Resultado Final

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente animación.

 

Opción 1 – Código CSS para la animación del scroll

Luego de que creas el salto de enlace, puedes entonces hacer la animación. La opción más simple es usar directamente código CSS para animar el desplazamiento del scroll.

Puedes agregar el siguiente código en Apariencia > Personalizar > CSS de tu theme.

html {
  scroll-behavior: smooth;
}
Ten en cuenta que scroll-behavior al ser una propiedad relativamente nueva, no funciona en todas las versiones de navegadores, aunque en las versiones actuales si funciona.

 

Opción 2 – Código Javascript para la animación del scroll

La animación del scroll en este caso lo haremos con código javascript, sin embargo para insertarlo usaremos un Hook de WordPress.


add_action('wp_footer', function(){
	?>
	<script>
		document.querySelectorAll('a[href^="#"]').forEach(anchor => {
			anchor.addEventListener('click', function (e) {
				e.preventDefault();

				document.querySelector(this.getAttribute('href')).scrollIntoView({
					behavior: 'smooth'
				});
			});
		});
	</script>
	<?php
});
Puedes agregar este código como parte del archivo functions.php de tu tema hijo o a través de un plugin de snippets.

En el código anterior:

  • Recorremos todos los enlaces de ancla, o que empiezan con el caracter #
  • Para cada uno de los enlaces establecemos el evento click
  • Evitamos el evento por defecto
  • Luego definimos la animación para la url del enlace con la función scrollIntoView()

 

Conclusión

Como has podido comprobar puedes darle un efecto de animación a tus saltos de enlaces o enlaces ancla de manera simple usando directamente código CSS o código javascript en WordPress.

Artículos Relacionados

Categorías: Themes
Etiquetas: accesibilidadmejoras

Ver comentarios (6)

  • Hola, que opinas de la propiedad css scroll-behavior: smooth creo que hace lo mismo y seria el navegador el encargado de crear el movimiento asi apenas hay consumo de recursos, el otro contra seria la compatibilidad.
    Un saludo.

    • Hola Jose, si, gracias por la observación, no había usado esa propiedad de CSS, he actualizado el artículo para también incluirla.

      Saludos.

  • Lo he probado en la ultima version de safari y si funciona perfectamente, ademas con las actualizaciones casi obligatorias de safari te aseguras compatibilidad, creo que a estas alturas ya se puede decir que es usable en cualquier situacion y mas ligero que js ya que es el navegador el que lo mueve sin depender de ningun script dentro de nuestra web.
    Saludos.

  • Todo el contenido que compartís y todo lo que enseñais al final tiene un valor impresionante, sois una web de referencia en cuanto a programación en wordpress y se aprende muchísimo con vosotros hasta el punto de prescindir de muchos plugins, yo he recurrido a vuestro codigo muchas veces y se agradece muchisimo ya que se encuentra de todo.
    Además sois de las pocas webs de programación que tiene un diseño agradable y muy bonito en su blog y eso tambien invita a venir a menudo.
    Un saludo y muchas gracias por todo vuestro trabajo.

Deja un comentario