Cómo agregar un desplazamiento suave al efecto superior en WordPress usando jQuery

¿Has visto sitios web que agregan un desplazamiento suave al principio de la página? Esto es genial cuando tienes una página larga y quieres darles a tus usuarios una forma fácil de volver al principio. Recientemente, uno de nuestros lectores nos preguntó acerca de agregar un desplazamiento suave al efecto superior en WordPress. En este artículo, le mostraremos cómo agregar un desplazamiento suave al efecto superior en WordPress usando jQuery.

Nota: Este tutorial está creado para un usuario intermedio de bricolaje que se siente cómodo editando sus temas. Si desea utilizar un método de complemento, utilice el desplazamiento suave de la página hasta el complemento superior. Para aquellos que quieran aprender cómo hacer esto sin un complemento, entonces continúen leyendo.

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

Desplazarse al ejemplo superior

Cuando una página o publicación 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 sus enlaces de navegación suben. Cuando los usuarios terminen de leer ese artículo, deben desplazarse hacia arriba para ver qué más hacer en su sitio web. Desplazarse al botón superior envía rápidamente a los usuarios a la parte superior de la página. Puede agregar esto como un enlace de texto sin usar jQuery, como este:

^Top

Simplemente envía a los usuarios a la parte superior de la página y desplaza la página completa en milisegundos. Es funcional, pero es como un golpe en la carretera. El desplazamiento suave es opuesto a eso. Desliza suavemente al usuario hacia la parte superior de la página. Esto crea un efecto agradable y mejora la experiencia del usuario.

Agregar desplazamiento suave al efecto superior con jQuery en WordPress

Para agregar un desplazamiento suave al efecto superior, utilizaremos jQuery, algo de CSS y una sola línea de código HTML en su tema de WordPress. Primero abra un editor de texto como el Bloc de notas. Cree un archivo y guárdelo como smoothscroll.js. Copie y pegue 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;
		});
});

Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará 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 debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

En el código anterior, le hemos dicho a WordPress que cargue nuestro script y también cargue la biblioteca jQuery ya que nuestro complemento depende de él. Ahora que hemos agregado la parte jQuery, agreguemos un enlace real a nuestro sitio de WordPress que lleve a los usuarios de regreso a la cima. Pegue este HTML en cualquier parte del archivo footer.php de su tema.


Como notó, hemos agregado un enlace pero no lo hemos vinculado a ningún texto. Esto se debe a que utilizaremos un ícono de imagen con una flecha hacia arriba para mostrar un botón de volver al principio. En este ejemplo, estamos usando un icono de 40x40px. Agregue esto a la hoja de estilo de su 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 usado una posición fija para nuestro icono de imagen y hemos usado un icono de imagen como imagen de fondo. Puede cargar su 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 agregado una pequeña animación CSS al botón que gira el botón cuando un usuario pasa el mouse sobre él.

Desplazarse al efecto superior permite a los usuarios volver al principio y encontrar otras cosas que hacer en su sitio web. Otra cosa que puede hacer es agregar una barra flotante de pie de página como la que tenemos en nuestro sitio para mostrar el contenido destacado. Si no desea que sus usuarios se desplacen hacia arriba para compartir su artículo, le recomendamos encarecidamente que utilice el complemento flotante de la barra para compartir en redes sociales como lo hemos hecho en WPBeginner.

Esperamos que este artículo lo haya ayudado a agregar un desplazamiento suave al efecto de la parte superior de la página en su sitio usando jQuery. Para ver otros usos geniales de jQuery en WordPress, puede consultar nuestro artículo de acordeón jQuery FAQ o el artículo de imágenes de carga diferida

¿Crees que el desplazamiento al efecto superior son útiles? Háganos saber dejando un comentario a continuación.

Publicaciones relacionadas

Botón volver arriba