Cómo añadir un efecto de desplazamiento suave hacia arriba en WordPress usando jQuery

¿Has visto sitios web que añaden un efecto de desplazamiento suave a la parte superior de la página? Esto es genial cuando tienes una página larga, y quieres dar a tus usuarios una forma fácil de volver a la parte superior. Recientemente, uno de nuestros lectores nos preguntó sobre cómo añadir un efecto de desplazamiento suave al principio de la página en WordPress. En este artículo, te mostraremos cómo añadir un efecto de desplazamiento suave hacia arriba en WordPress utilizando jQuery.

Nota: Este tutorial está creado para un usuario intermedio que se siente cómodo editando sus temas. Si quieres utilizar un método de plugin, entonces utiliza plugin de desplazamiento suave de la página hacia arriba. Si quieres aprender a hacer esto sin un plugin, sigue leyendo.

¿Qué es el desplazamiento suave y cuándo utilizarlo?

Cuando una página o post tiene mucho contenido, los usuarios se ven obligados a desplazarse hacia abajo para leer esos contenidos. A medida que los usuarios se desplazan hacia abajo, todos tus enlaces de navegación suben. Cuando los usuarios terminan de leer ese artículo, necesitan desplazarse hacia arriba para ver qué más hacer en tu sitio web. El botón de desplazamiento hacia arriba envía rápidamente a los usuarios a la parte superior de la página. Puedes añadirlo como un enlace de texto sin usar jQuery, así

<a href="#" title="Back to top">^Top</a>

Simplemente envía a los usuarios a la parte superior de la página y se desplaza por toda la página en milisegundos. Es funcional, pero es como un bache en la carretera. El desplazamiento suave es lo contrario. Desliza suavemente al usuario hacia la parte superior de la página. Esto crea un bonito efecto y mejora la experiencia del usuario

Añadir el efecto de desplazamiento suave hacia arriba con jQuery en WordPress

Para añadir un efecto de desplazamiento suave hacia arriba, vamos a utilizar jQuery, algo de CSS y una sola línea de código HTML en tu tema de WordPress. Primero abre un editor de texto como el Bloc de notas. Crea un archivo y guárdalo como smoothscroll.js. Copia y pega este código en el archivo

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Guarda el archivo y súbelo al directorio de tu tema de WordPress /js/ (ver Cómo utilizar el FTP para subir archivos a WordPress). Si tu tema no tiene un /js/ entonces crea uno y sube smoothscroll.js al mismo. Este código es el script jQuery que añadirá un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página

Lo siguiente que tienes que hacer es añadir el código smoothscroll.js a tu tema. Para hacerlo bien, pondremos en cola el script en WordPress (aprende más en nuestra guía sobre cómo añadir correctamente los scripts en WordPress). Copia y pega este código en el apartado de tu tema functions.php de tu tema

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

En el código anterior, le hemos dicho a WordPress que cargue nuestro script y que también cargue la librería jQuery, ya que nuestro plugin depende de ella. Ahora que hemos añadido la parte de jQuery, vamos a añadir un enlace real a nuestro sitio de WordPress que lleve a los usuarios de vuelta a la parte superior. Pega este HTML en cualquier lugar de tu tema footer.php de tu tema

<a href="#top" id="smoothup" title="Back to top"></a>

Como has notado, hemos añadido un enlace pero no lo hemos vinculado a ningún texto. Eso es porque vamos a utilizar un icono de imagen con una flecha hacia arriba para mostrar un botón de vuelta al principio. En este ejemplo estamos utilizando un icono de 40x40px. Añade esto a la hoja de estilos de tu tema

#smoothup { 
height: 40px; 
width: 40px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s; 
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

En el CSS anterior, hemos utilizado una posición fija para nuestro icono de imagen y hemos utilizado un icono de imagen como imagen de fondo. Puedes subir tu icono de imagen usando el cargador de medios de WordPress y luego obtener la url de la imagen para pegarla como url de fondo. También hemos añadido una pequeña animación CSS al botón que hace girar el botón cuando el usuario pasa el ratón por encima

El efecto de desplazamiento a la parte superior permite a los usuarios volver a la parte superior y encontrar otras cosas que hacer en tu sitio web. Otra cosa que puedes hacer es añadir una barra de pie de página flotante como la que tenemos en nuestro sitio para mostrar contenido destacado. Si no quieres que tus usuarios se desplacen a la parte superior para compartir tu artículo, entonces te recomendamos encarecidamente que utilices el plugin de la barra social flotante para compartir, como el que tenemos en WPMundobytes.

Esperamos que este artículo te haya ayudado a añadir un efecto de desplazamiento suave a la parte superior de la página en tu sitio web utilizando jQuery. Para ver otros usos interesantes de jQuery en WordPress, puedes consultar nuestro artículo sobre el acordeón jQuery FAQ o el artículo sobre las imágenes de carga lenta

¿Crees que el efecto de desplazamiento hacia arriba es útil? Háznoslo saber dejando un comentario abajo.