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;
}
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
});
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.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
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.
Hola José, si cierto, yo lo probé en Safarí 14.0.3, y aún no funcionaba. 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.
Gracias Jose. Un saludo para ti igualmente.