Cómo añadir un desplazamiento suave a Top Effect en WordPress usando jQuery

¿Ha visto sitios web que añaden un desplazamiento suave a la parte superior del efecto de la página? Esto es genial cuando tienes una página larga, y quieres dar a tus usuarios una forma fácil de volver a la cima. Recientemente uno de nuestros lectores nos ha preguntado sobre la posibilidad de añadir un scroll suave al efecto superior en WordPress. En este artículo, le mostraremos cómo añadir un scroll suave al efecto superior en WordPress usando jQuery.

Nota: Este tutorial ha sido creado para un usuario intermedio de bricolaje que se siente cómodo editando sus temas. Si desea utilizar un método de plugin, por favor, utilice el desplazamiento suave de la página para llegar a la parte superior del plugin. Para aquellos que quieran aprender a hacer esto sin un plugin, por favor continúen leyendo.

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

Cuando una página o mensaje tiene mucho contenido, los usuarios se ven obligados a desplazarse hacia abajo para leerlo. A medida que los usuarios se desplazan hacia abajo, todos sus enlaces de navegación suben. Cuando los usuarios terminan de leer ese artículo necesitan 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 añadir esto como un enlace de texto sin usar jQuery, así:

1^Arriba

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 es como un bache en la carretera. Un pergamino suave es lo opuesto a eso. Se 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.

Adición de Desplazamiento Suave al Efecto Superior con jQuery en WordPress

Para añadir un desplazamiento suave al efecto superior, usaremos jQuery, algo de CSS y una sola línea de código HTML en tu 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:

12345678910111213jQuery(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'); returnfalse; });});

Guarde el archivo y cárguelo en la carpeta /js/ de su directorio temático de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio /js/, cree uno y suba smoothscroll.js a é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 tiene que hacer es añadir el archivo smoothscroll.js a su tema. Para hacer esto bien, vamos a poner el script en cola en WordPress (más información en nuestra guía sobre cómo añadir correctamente scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.

1wp_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 que cargue la librería jQuery ya que nuestro plugin depende de él. Ahora que hemos añadido la parte jQuery, vamos a añadir un enlace real a nuestro sitio de WordPress que lleva a los usuarios de vuelta a la parte superior. Pegue este HTML en cualquier lugar del archivo footer.php de su tema.

1

Como has notado, hemos añadido un enlace pero no lo hemos enlazado a ningún texto. Esto se debe a que usaremos un icono de imagen con una flecha hacia arriba para mostrar un botón de regreso a la parte superior. En este ejemplo estamos usando un icono de 40x40px. Añada esto a la hoja de estilo de su tema.

123456789101112131414151617#smoothup { altura: 40px; anchura: 40px; posición: fija; fondo: 50px; derecha: 100px; texto-indente: -9999px; pantalla: ninguna; fondo: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transición-duración: 0,4 s; -moz-transición-duración: 0,4 s; duración de la transición: 0.4s; } #smoothup:hover {-webkit-transform: rotate(360deg) }background: url(''') no-repeat;}

En el CSS anterior, hemos utilizado la posición fija para nuestro icono de imagen y hemos utilizado un icono de imagen como imagen de fondo. Puedes subir tu 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 añadido un poco de animación CSS al botón que rota el botón cuando un usuario pasa el ratón por encima de él.

Desplazarse 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 añadir una barra de pie de página flotante como la que tenemos en nuestro sitio para mostrar contenido destacado. Si no quieres que tus usuarios se desplacen a la parte superior para compartir tu artículo, te recomendamos que utilices el plugin flotante de la barra de compartición social como tenemos en AprenderWP.

Esperamos que este artículo le haya ayudado a añadir un desplazamiento suave a la parte superior del efecto de la página en su sitio usando jQuery. Para ver algunos otros usos interesantes de jQuery en WordPress puedes ver nuestro artículo de acordeón de jQuery FAQ o el artículo de imágenes de carga perezosa.

¿Piensas que los scrolls de efecto superior son útiles? Háganoslo saber dejando un comentario a continuación.