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("https://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.