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.

 

Código para la animación del salto de enlace

Luego de que creas el salto de enlace, puedes entonces hacer la animación.

La animación del scroll se realiza usando 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 javascript en WordPress.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:

Suscríbete a DecodeCMS:  

 

La entrada Animación de saltos de enlace en WordPress es un artículo reciente del sitio DecodeCMS.