¿Ha visto sitios web que agregan un efecto de desplazamiento suave a la parte superior de la página? Esto es excelente 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 preguntó sobre cómo agregar un efecto de desplazamiento suave a la parte superior en WordPress. En este artículo, le mostraremos cómo agregar un efecto de desplazamiento suave a la parte 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 Complemento de desplazamiento de página suave a la parte superior. Para aquellos que quieran aprender a hacer esto sin un complemento, continúen leyendo.
¿Qué es Smooth Scroll y cuándo usarlo?
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 aumentan. Cuando los usuarios terminan de leer ese artículo, deben desplazarse hacia arriba para ver qué más pueden hacer en su sitio web. El botón Desplazarse hasta la parte 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, 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 hacia arriba por toda la página en milisegundos. Es funcional, pero como un bache en la carretera. El desplazamiento suave es opuesto a eso. Desliza suavemente al usuario de regreso a la parte superior de la página. Esto crea un efecto agradable y mejora la experiencia del usuario.
Agregar efecto de desplazamiento suave a la parte superior con jQuery en WordPress
Para agregar un efecto de desplazamiento suave a la parte superior, usaremos 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 el directorio de su tema de WordPress. /js/
carpeta (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un /js/
directorio, luego crea uno y sube 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 debe hacer es agregar el smoothscroll.js
a tu 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). Copia y pega este código en tu tema. functions.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 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 a la parte superior. Pegue este HTML en cualquier lugar de su tema footer.php
expediente.
<a href="#top" id="smoothup" title="Back to top"></a>
Como notó, hemos agregado un enlace pero no lo hemos vinculado a ningún texto. Esto se debe a que usaremos un icono de imagen con una flecha hacia arriba para mostrar un botón para 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 utilizado una posición fija para nuestro icono de imagen y hemos utilizado un icono de imagen como imagen de fondo. Puede cargar el ícono de su 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.
El efecto de desplazamiento a la parte superior 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 contenido destacado. Si no desea que sus usuarios se desplacen hacia la parte superior para compartir su artículo, le recomendamos encarecidamente que utilice el complemento de la barra de compartir social flotante como el que tenemos en Themelocal.
Esperamos que este artículo le haya ayudado a agregar un efecto de desplazamiento suave a la parte superior de la página en su sitio usando jQuery. Para ver algunos otros usos interesantes de jQuery en WordPress, puede consultar nuestro artículo de acordeón de preguntas frecuentes de jQuery o el artículo de imágenes de carga diferida.
¿Crees que el efecto de desplazamiento hacia arriba es útil? Háganos saber dejando un comentario a continuación.