WordPress: Cómo crear un botón con efecto de desplazamiento

¡Buenos días! En este vídeo vamos a ver cómo crear un botón o un enlace que al clicarlo se haga scroll hacía la parte de la web que nos interese. ¡Vamos allá!

YouTube video

Como vemos el proceso no es muy complicado, pero vamos a repasar los pasos que hemos seguido y de paso os comparto el código que utilicé en el vídeo.

Paso 1: preparamos los botones y los objetos de destino

Técnicamente un botón es un enlace estilizado así que en este caso utilizaré “botón” y “enlace” como sinónimos.

Así que el primer paso es crear un enlace/botón que apunte al ID del objeto donde queremos que se desplace. Lo hacemos con el atributo href=”#id-del-elemento”. Por otra parte, le asignamos una clase o un ID al botón para luego utilizar esa clase o ID en código JavaScript.

Paso 2: añadimos el efecto de desplazamiento del scroll

En este caso he optado por crear un archivo .js aparte y cargarlo como un script aparte. La otra opción sería insertar ese mismo código dentro de un archivo .js ya existente pero prefiero hacerlo aparte y tener el código más ordenado. Aquí te dejo el código del archivo:

jQuery(document).ready(function() {
 jQuery('.clase-o-id-del-boton').click(function(){
 jQuery('html, body').animate({
 scrollTop: jQuery( jQuery(this).attr('href') ).offset().top - 150
 } , 500);
 return false;
});
});

Paso 3: cargamos el efecto en functions.php

Actualización: en el vídeo no lo hago de esta manera pero te recomiendo hacerlo así si en tu functions.php no hay una función que cargue scripts o simplemente quieres una solución de copiar y pegar.

Para cargar el archivo JS (smooth-scroll.js en este caso) en el functions.php podemos insertar simplemente este código al final del todo:

add_action( 'wp_enqueue_scripts', 'bps_smooth_scroll' );
function bps_smooth_scroll() {
	wp_enqueue_script('smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array('jquery'));
}

Lo que hace este código es simplemente cargar el archivo que se llame smooth-scroll.js que esté dentro de la carpeta /js/ que a su vez está dentro de la carpeta de nuestro theme. Si le cambias el nombre a ese archivo JS también tendrás que cambiarlo aquí así que si te pierdes un poco en este paso, simplemente usa el mismo nombre de archivo y esta función te servirá a la perfección 🙂

Si te lías con todo esto de cargar scripts desde el functions.php puedes revisar esta entrada de cómo cargar JS y CSS en WordPress donde lo explico con más detalle.

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web