¿Ha visto algún sitio web que agregue un efecto de desplazamiento suave en la parte superior de la página? Es genial cuando tiene una página larga y desea brindarles a sus usuarios una manera fácil de volver a la parte superior. Recientemente, uno de nuestros lectores nos pidió que agreguemos un efecto de desplazamiento hacia arriba suave en WordPress. En este artículo, le mostraremos cómo agregar un efecto de desplazamiento hacia arriba suave en WordPress usando jQuery. Nota: Este tutorial está creado para un usuario de bricolaje intermedio 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 a hacer esto sin un complemento, sigan leyendo.
¿Qué es Smooth Scroll y cuándo debería usarlo?
Cuando una página o publicación tiene mucho contenido, los usuarios se ven obligados a desplazarse hacia abajo para leer ese contenido. A medida que los usuarios se desplazan hacia abajo, todos los enlaces de navegación aumentan. Cuando los usuarios terminen de leer este artículo, deben desplazarse hasta la parte superior para ver qué más pueden hacer en su sitio web. El botón Desplazarse hacia arriba envía rápidamente a los usuarios a la parte superior de la página. Puede agregarlo como un enlace de texto sin usar jQuery, así: ^ Arriba 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 un poco como un bache en el camino. El desplazamiento suave es lo opuesto a esto. Desliza suavemente al usuario a la parte superior de la página. Crea un efecto agradable y mejora la experiencia del usuario.
Agregar un efecto de desplazamiento hacia arriba suave con jQuery en WordPress
Para agregar un efecto de desplazamiento hacia arriba suave, usaremos jQuery, 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 con el nombre smoothscroll.js. Copie y pegue este código en el archivo: jQuery (documento) .ready (function ($) {$ (window) .scroll (function () {if ($ (this) .scrollTop () <200) {$ ('# smoothup ') .fadeOut ();} else {$ (' # smoothup ') .fadeIn ();}}); $ (' # smoothup '). on (' click ', function () {$ (' html, cuerpo '). animate ({scrollTop: 0},' rápido '); devuelve falso;});}); 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 allí. 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 hacer esto bien, vamos a poner en cola el script en WordPress (lea más 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 ('suavizado', get_template_directory_uri (). '/js/smoothscroll.js', array ('jquery'), '', verdadero); En el código anterior, le dijimos a WordPress que cargara nuestro script y también cargara 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 a la parte superior. Pegue este código HTML en cualquier lugar del archivo footer.php de su tema. Como notó, agregamos un vínculo, pero no lo vinculamos 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 retroceso en la parte superior. En este ejemplo, estamos usando un icono de 40x40px. Agregue esto a la hoja de estilo de su tema. #smoothup {altura: 40px; ancho: 40px; posición: fija; bajo: 50px; derecha: 100px; sangría de texto: -9999px; pantalla: ninguna; background: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transición-duración: 0.4s; -moz-transición-duración: 0.4s; tiempo de transición: 0,4 s; } #smoothup: hover {-webkit-transform: rotate (360deg)} background: url ('') no-repeat; } En el CSS anterior, usamos una posición fija para nuestro ícono de imagen y usamos un ícono de imagen como imagen de fondo. Puede cargar el icono de su imagen utilizando el descargador 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. El efecto Desplazarse hacia arriba lleva a los usuarios a la parte superior y encuentran 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 contenido destacado. Si no desea que sus usuarios se desplacen hacia arriba para compartir su publicación, le recomendamos encarecidamente que utilice el complemento de barra flotante para compartir en redes sociales como el que tenemos en MundoCMS. Esperamos que este artículo le haya ayudado a agregar un desplazamiento suave a la parte superior del efecto de página en su sitio usando jQuery. Para ver otros usos interesantes de jQuery en WordPress, puede consultar nuestro artículo sobre el acordeón de preguntas frecuentes de jQuery o el artículo sobre imágenes de carga diferida. ¿Crees que el efecto de desplazamiento hacia arriba es útil? Háganos saber dejando un comentario a continuación.
