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

¿Has visto sitios web que agregan un desplazamiento suave al efecto de inicio de página? Esto es genial cuando tiene una página larga y desea darles a sus usuarios una manera fácil de volver a la cima. Recientemente, uno de nuestros lectores nos preguntó acerca de cómo 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 sienta cómodo editando sus temas. Si desea utilizar un método de complemento, utilice el desplazamiento suave de la página para acceder al complemento superior. Para aquellos que quieran aprender a hacer esto sin un complemento, entonces continúen leyendo.

Qué es Smooth Scroll y cuándo usarlo?

Cuando una página o publicación tiene una gran cantidad de 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 hayan terminado de leer ese artículo, deben desplazarse hacia arriba para ver qué más hacer en su 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 agregar esto como un enlace de texto sin usar jQuery, como esto:

 ^ Arriba 

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 un poco como un bache en la carretera. El desplazamiento suave es opuesto a eso. Desliza suavemente al usuario de vuelta a la parte superior de la página. Esto crea un efecto agradable y mejora la experiencia del usuario..

Agregar un desplazamiento suave al efecto superior con jQuery en WordPress

Para agregar un desplazamiento suave al efecto superior, usaremos jQuery, algo de CSS y una única línea de código HTML en su tema de WordPress. Primero abre un editor de texto como Notepad. 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; ); ); 

Guarde el archivo y cárguelo en el directorio de temas de WordPress. / js / carpeta (vea Cómo usar FTP para cargar archivos a WordPress). Si tu tema no tiene una / js / directorio, luego crear uno y subir smoothscroll.js lo. 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 debes hacer es agregar el smoothscroll.js a tu tema Para hacerlo bien, pondremos en cola el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copia y pega este código en tu tema funciones.php expediente.

 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 que también cargue la biblioteca jQuery ya que nuestro complemento depende de ello. Ahora que hemos agregado la parte jQuery, agreguemos un enlace real a nuestro sitio de WordPress que lleva a los usuarios a la cima. Pega este HTML en cualquier lugar en tu tema footer.php expediente.

Como ha notado, hemos agregado un enlace pero no lo hemos vinculado a ningún texto. Esto se debe a que usaremos un ícono de imagen con una flecha hacia arriba para mostrar un botón de regreso al inicio. En este ejemplo estamos usando un icono de 40x40px. Añade esto a la hoja de estilo de tu tema.

 #smoothup altura: 40px; ancho: 40px; posición: fijo inferior: 50px; derecha: 100px; texto-sangría: -9999px; pantalla: ninguna; background: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transición-duración: 0.4s; -mez-transición-duración: 0.4s; duración de la transición: 0.4s;  #smoothup: hover -webkit-transform: rotate (360deg) fondo: url (") no-repetir; 

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. Puede cargar su ícono de imagen usando el cargador de archivos 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 coloca el mouse sobre él..

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

Esperamos que este artículo le 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 jQuery Preguntas frecuentes sobre acordeón o el artículo de carga lenta de imágenes..

¿Crees que los efectos de desplazamiento hacia arriba son útiles? Háganos saber dejando un comentario a continuación..