¿Alguna vez has navegado por una publicación de blog larga de WordPress o una página de producto en tu teléfono, solo para darte cuenta de que tenías que deslizar todo el camino hacia arriba solo para encontrar el menú? Tus visitantes podrían sentir lo mismo.
En páginas más largas, esa pequeña inconveniencia puede convertirse rápidamente en frustración. Y algunos simplemente pueden abandonar tu sitio de WordPress en lugar de volver a navegar.
Un botón suave para subir puede ayudarte a solucionar esto al instante. Esta función brinda a los lectores una forma rápida de volver a subir, lo que puede mantenerlos interesados y animarlos a explorar más de tu sitio.
En esta guía, te mostraremos exactamente cómo agregar un efecto suave de desplazamiento hacia arriba en WordPress usando jQuery. ¡No te preocupes, es más simple de lo que piensas! 💡
¿Qué es el desplazamiento suave y cuándo deberías usarlo?
El desplazamiento suave es un efecto de navegación que mueve la página hacia arriba o hacia abajo en un movimiento constante y fluido en lugar de saltar instantáneamente a una sección. Deberías usarlo cuando quieras dar a los usuarios una forma menos brusca de navegar por páginas largas, especialmente para funciones como los botones "volver arriba".
A menos que el sitio tenga un menú de encabezado fijo, los usuarios que se desplazan hasta el final de una publicación o página larga de WordPress tienen que deslizar o desplazarse manualmente hacia arriba para navegar por el sitio.
Eso puede ser una verdadera molestia, y a menudo, los usuarios simplemente presionarán el botón de retroceso y se irán. Es por eso que necesitas un botón para enviar rápidamente a los usuarios a la parte superior de la publicación o página.
Típicamente, puedes agregar esta funcionalidad como un simple enlace de texto sin usar jQuery, así:
<a href="#" title="Back to top">^Top</a>
Eso enviará a los usuarios a la parte superior desplazando toda la página en milisegundos. Funciona, pero el efecto puede ser brusco, algo así como cuando golpeas un bache en el camino.
Un desplazamiento suave es lo opuesto a eso. Deslizará al usuario de regreso a la parte superior con un efecto visualmente agradable. Usar elementos como este puede mejorar drásticamente la experiencia del usuario en tu sitio.
Con eso en mente, compartiremos dos métodos para agregar un efecto de desplazamiento suave hacia arriba en tu sitio de WordPress usando un plugin y jQuery. Aquí tienes un resumen rápido de todas las cosas que cubriremos en esta guía:
- Consejo 1: Agregar un efecto de desplazamiento suave hacia arriba usando un plugin de WordPress (Fácil)
- Consejo 2: Agregar un efecto de desplazamiento suave hacia arriba con jQuery en WordPress (Avanzado)
- Consejo Adicional: Otros efectos sutiles de animación para mantener a los visitantes interesados
- Preguntas Frecuentes: Agregar un efecto de desplazamiento hacia arriba en WordPress usando jQuery
- Lectura Adicional: Más recursos sobre temas de WordPress
Sin más preámbulos, comencemos con el primer método.
Agregar un efecto de desplazamiento suave hacia arriba usando un plugin de WordPress
Este método se recomienda para principiantes, ya que te permite agregar un efecto de desplazamiento hacia arriba a un sitio web de WordPress sin tocar una sola línea de código.
Lo primero que necesitarás hacer es instalar y activar el plugin WPFront Scroll Top. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Al activarlo, puedes ir a Ajustes » Scroll Top desde tu panel de WordPress. Aquí, puedes configurar el plugin y personalizar el efecto de desplazamiento suave.
Desde aquí, lo primero que necesitarás hacer es hacer clic en la casilla de verificación 'Habilitado' para activar el botón de desplazamiento hacia arriba en tu sitio. A continuación, verás opciones para editar el desplazamiento inicial, el tamaño del botón, la opacidad, la duración del desvanecimiento, la duración del desplazamiento y más.
Si te desplazas hacia abajo, encontrarás más opciones, como editar el tiempo de ocultación automática y habilitar la opción para ocultar el botón en dispositivos pequeños o en la pantalla de wp-admin.
También puedes editar lo que hace el botón cuando haces clic en él. Por defecto, se desplazará a la parte superior de la página, pero puedes cambiarlo para que se desplace a un elemento particular en la publicación o incluso enlazar a una página.
Adicionalmente, puedes ajustar la ubicación del botón. Si bien normalmente aparece en la esquina inferior derecha de la pantalla, tienes la opción de moverlo a cualquier otra esquina.
El plugin WPFront Scroll Top ofrece filtros para mostrar el botón de desplazamiento hacia arriba solo en páginas seleccionadas.
Normalmente, aparecerá en todas las páginas de tu blog de WordPress.
Sin embargo, puedes navegar a la sección 'Mostrar en Páginas' y elegir dónde te gustaría mostrar el efecto de desplazamiento hacia arriba.
El plugin también ofrece diseños de botones predefinidos. Deberías poder encontrar fácilmente un diseño que coincida con tu sitio.
Si no puedes encontrar un botón de imagen predefinido que te funcione, entonces hay una opción para subir una imagen personalizada desde la biblioteca de medios de WordPress.
Cuando hayas terminado, simplemente haz clic en el botón 'Guardar Cambios'.
Ahora puedes visitar tu sitio web de WordPress para ver el botón de desplazamiento hacia arriba en acción.
Añadir efecto de desplazamiento suave hacia arriba con jQuery en WordPress
Antes de empezar, ten en cuenta que este método no se recomienda para principiantes. Es adecuado para personas que se sienten cómodas editando temas, ya que incluye añadir código a tu sitio web.
Para añadir el efecto de desplazamiento suave hacia arriba, usaremos jQuery, algo de CSS y una sola línea de código HTML en tu tema de WordPress.
Primero, abramos un editor de texto como el Bloc de notas y creemos un archivo. Continúa y guárdalo como smoothscroll.js.
A continuación, necesitarás copiar y pegar 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;
});
});
Este código es el script de 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.
Después de eso, puedes guardar el archivo y subirlo a la carpeta /js/ en tu directorio de temas de WordPress.
Para más detalles, por favor consulta nuestra guía sobre cómo usar FTP para subir archivos a WordPress.
💡 Nota: ¿No estás seguro de qué cliente FTP usar? Nuestro equipo de desarrollo web en WPBeginner a menudo usa FileZilla. Es una opción confiable y gratuita para administrar los archivos de tu sitio web.
Si tu tema no tiene un directorio /js/, entonces puedes crear uno y subir smoothscroll.js a él.
También puedes consultar nuestra guía sobre la estructura de archivos y directorios de WordPress para más información.
Lo siguiente que necesitas hacer es cargar el archivo smoothscroll.js en tu tema.
Para hacer eso, pondremos en cola el script en WordPress simplemente copiando y pegando este código en el archivo functions.php de tu tema.
Sin embargo, no recomendamos editar directamente los archivos del tema porque el más mínimo error puede romper tu sitio.
En su lugar, puedes usar un plugin como WPCode, el mejor plugin de fragmentos de código para WordPress, y seguir nuestro tutorial sobre cómo agregar fragmentos de código personalizados en WordPress:
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
💡 Nota: Usamos WPCode en nuestros sitios empresariales para crear y administrar fragmentos de código personalizados.
Para este tutorial, la versión gratuita de WPCode es todo lo que necesitas. Sin embargo, si deseas funciones avanzadas como la programación de código o un historial de revisiones completo, necesitarás WPCode Pro. Puedes obtener más información al respecto en nuestra reseña completa de WPCode.
El código anterior le indica a WordPress que cargue nuestro script y la biblioteca jQuery, ya que nuestro plugin depende de ellos.
Ahora que hemos agregado jQuery, agreguemos un enlace real a nuestro sitio de WordPress que lleve a los usuarios de vuelta a la parte superior.
Para hacer esto, simplemente pega este HTML en cualquier lugar del archivo footer.php de tu tema usando WPCode.
<a href="#top" id="smoothup" title="Back to top"></a>
Si necesitas ayuda, por favor consulta nuestro tutorial sobre cómo agregar código de encabezado y pie de página en WordPress
Es posible que hayas notado que el código HTML incluye un enlace pero no texto de anclaje. Esto se debe a que usaremos un ícono de imagen con una flecha hacia arriba para mostrar un botón de "volver arriba".
En este ejemplo, estamos usando un ícono de 40x40px. Simplemente agrega el CSS personalizado a continuación a la hoja de estilos de tu tema.
En este código, estamos usando un ícono de imagen como imagen de fondo del botón y lo estamos posicionando de forma fija. También hemos agregado una pequeña animación CSS, que rota el botón cuando un usuario pasa el mouse sobre él:
#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, asegúrate de reemplazar https://www.example.com/wp-content/uploads/2013/07/top_icon.png con la URL de la imagen que deseas usar.
Puedes subir tu propio ícono de imagen usando el cargador de medios de WordPress, copiar la URL de la imagen y luego pegarla en el código.
¡Y eso es básicamente todo!
Consejo Adicional: Otros efectos sutiles de animación para mantener a los visitantes interesados
Un botón de desplazamiento suave hacia arriba es solo una forma de hacer que tu sitio se sienta más fácil de usar. Hay muchos otros efectos de animación pequeños que puedes agregar para guiar suavemente la atención y hacer que navegar por tu sitio se sienta sin esfuerzo.
Por ejemplo, un efecto parallax hace que las imágenes de fondo se muevan a una velocidad diferente que tu contenido, creando una sensación de profundidad y movimiento.
Es una forma sencilla de hacer que tus páginas se sientan más vivas. Para instrucciones paso a paso, consulta nuestra guía sobre cómo agregar un efecto parallax.
Un efecto de alternancia de búsqueda mantiene las cosas limpias mostrando la barra de búsqueda solo cuando alguien hace clic en el ícono. Esto ayuda a que tu diseño se sienta menos abarrotado, al mismo tiempo que facilita que los visitantes encuentren lo que necesitan.
Si tu tema no tiene esto incorporado, complementos como WPCode pueden ayudar. Para obtener detalles, consulta nuestra guía sobre cómo agregar un efecto de alternancia de búsqueda en WordPress.
Y si tienes una galería de imágenes, un efecto lightbox permite a las personas ver fotos en una ventana emergente más grande y sin distracciones, sin salir de la página. Es un pequeño detalle, pero marca una gran diferencia para cualquiera que ame explorar tus visuales.
Además, los plugins de galería como Envira Gallery facilitan la adición de esta función. Para hacerlo, puedes consultar nuestra guía sobre cómo agregar una galería en WordPress con efecto de lightbox.
Estos detalles no son solo "agradables de tener"; demuestran a los visitantes que has pensado en su experiencia. Esto puede hacer que sea más probable que se queden y exploren. 🕵️
Preguntas frecuentes: Agregar un efecto de desplazamiento hacia arriba en WordPress usando jQuery
Antes de terminar, aquí hay algunas preguntas comunes que los lectores tienen sobre cómo agregar un botón de desplazamiento hacia arriba en WordPress.
¿Es necesario un botón de desplazamiento hacia arriba para todos los sitios web?
No siempre. Pero es una adición inteligente para páginas con mucho contenido. En publicaciones de blog largas o tutoriales, ahorra a los visitantes la molestia de desplazarse hasta arriba, lo que hace que su experiencia de navegación sea más agradable.
¿Agregar un botón para desplazarse hacia arriba ralentizará mi sitio?
No debería. El método del plugin es ligero y está optimizado para el rendimiento, y el fragmento de código jQuery es diminuto. Por lo tanto, no tendrá ningún impacto notable en la velocidad de tu sitio.
¿Dónde es el mejor lugar para colocar el botón para desplazarse hacia arriba?
La mayoría de los sitios lo colocan en la esquina inferior derecha de la pantalla. Este lugar lo mantiene visible y de fácil acceso sin distraer del contenido principal.
¿Puedo usar un enlace de texto en lugar de una imagen para mi botón?
Absolutamente. Tanto el método del plugin como el de código personalizado se pueden configurar con un simple enlace de texto "Volver arriba" en lugar de un ícono. El plugin ofrece esta opción de fábrica, y con el método de código, solo ajustas el HTML y CSS para que coincida con tu estilo.
Lectura Adicional: Más recursos sobre temas de WordPress
Esperamos que este artículo te haya ayudado a agregar un efecto suave de desplazamiento hacia arriba en tu sitio usando jQuery. ¿Quieres profundizar en los temas de WordPress? Estos recursos te ayudarán:
- Temas de WordPress más populares y mejores
- ¿Qué sucede cuando cambias tu tema de WordPress?
- Cosas que DEBES HACER antes de cambiar de tema en WordPress
- ¿Qué es un framework de temas de WordPress y cuáles son los mejores frameworks de temas?
- Cómo personalizar tu tema de WordPress
- Cómo encontrar qué archivos editar en un tema de WordPress
- Cómo usar el personalizador de temas de WordPress como un profesional
- Una guía completa para principiantes sobre la edición de sitios completos en WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Olaf
Este pequeño ícono es genial para soluciones de escritorio, donde los usuarios tienen que desplazarse mucho para volver al principio. Es un buen detalle, y personalmente me gusta. En dispositivos móviles, el propósito se pierde un poco, ya que el deslizamiento rápido está disponible y, a veces, el botón simplemente estorba. El plugin mencionado en el artículo es uno de los pocos en el repositorio de WordPress que funciona realmente en todas partes y como debería. Lo recomiendo y lo uso ocasionalmente. Sin embargo, según mi experiencia, sugiero deshabilitarlo específicamente en dispositivos móviles.
Dennis Muthomi
Un consejo que ME ENCANTARÍA agregar es considerar combinar el esquema de colores del botón con el tema de tu sitio web para una apariencia más cohesiva.
Este pequeño detalle puede marcar una gran diferencia en la experiencia general del usuario.
Mrteesurez
Veo que implementar una función de desplazamiento hacia arriba es beneficioso para los sitios web, especialmente para los que publican contenido muy largo. Los usuarios podrían necesitar ver el principio de la publicación o volver a la parte superior, por lo que esta funcionalidad sin duda mejorará la experiencia del usuario. Veo que la mayoría de los sitios web, incluido WPbeginner, no la usan, ¿pero por qué?
¿Hay algún beneficio en no usarla, tal vez para una mayor retención de usuarios o qué?
Puedes incluir los pros y los contras en esta publicación en una actualización posterior.
Soporte de WPBeginner
We will look into the possibility for the future, for now we do not have it as personal preference. As someone goes through a tutorial they normally want to see the previous step by scrolling manually and not the start of the article
Administrador
Mrteesurez
Bueno, posiblemente, pero para mí, el caso de uso es más que solo ver el paso anterior en los artículos. Este artículo destacó que “A menos que el sitio tenga un menú de encabezado fijo, los usuarios que se desplazan hasta el final de una publicación o página larga de WordPress tienen que deslizar o desplazarse manualmente de regreso a la parte superior para navegar por el sitio. Eso puede ser una verdadera molestia, y a menudo, los usuarios simplemente presionarán el botón de retroceso y se irán. Es por eso que necesita un botón para enviar rápidamente a los usuarios a la parte superior”. Solo quiero señalar que los casos de uso mencionados en el artículo son beneficiosos y justifican su uso. Gracias.
Jiří Vaněk
Anteriormente, no tenía un botón de 'volver arriba' en la página, pero a medida que mis artículos se hacían más largos, no quería que los usuarios pasaran varios segundos desplazándose. Empecé a usar este plugin exacto, y es fantástico. Mejora significativamente la comodidad del usuario, aunque a primera vista pueda parecer innecesario. No lo es.
Asha
¡Muchas gracias! Esto está muy claramente explicado. Útil.
Marco
El método Jquery no me funcionó usando un tema hijo de Twenty-seventeen. Bueno. La versión del hipervínculo sí funcionó perfectamente, afortunadamente, y es suficiente para mí.
Marco
Una pregunta… ¿podría ser que una razón por la que esto no me funciona (el método jquery) sea porque mi instalación de WordPress está en una subcarpeta? Es la única razón que se me ocurre.
Taffeltrast
Me encantaría esto, pero rompe el footer.php. El pie de página simplemente no carga.
Cuando intento agregarlo a footer.php, obtengo "Hay un error de sintaxis en la línea 14. etc etc", y cuando intento subirlo de todos modos, el pie de página no carga.
oliver
muchas gracias, simple y efectivo.
mi opinión, si ya tienes un archivo custom.js en tu tema, puedes simplemente agregar la función de jquery en este archivo en lugar de crear uno nuevo y volver a agregarlo.
Personalmente, prefiero tener todos mis pequeños scripts en un solo archivo.
Stuart
Tema Hijo Diseñado por Blank |
<?php }
add_action('wp_head', 'my_favicon');
¿Qué estoy haciendo mal? Este es mi funtions.php, soy nuevo en wp_enqueue_scripts.
Stuart
Twenty Fifteen-Child Theme creó una carpeta Js, agregó todo el wp_enqueue_script pero no funcionó, no estoy seguro de qué salió mal. Quiero usar la menor cantidad de plugins posible, parecen ralentizar los sitios de WordPress. Agregué un favicon perfecto, wp_enqueue_script es algo nuevo para mí. ¿Alguna ayuda?
Donald
Hola, ¿esto todavía funciona? El icono aparece (si cambio temporalmente el CSS a display:block), el script se muestra como cargado en la consola de la caja de herramientas de desarrollador de Firefox. Sin embargo, recibo el siguiente mensaje de error para la línea 1:
'SyntaxError: falta ; antes de la declaración'
He copiado el script como se indica arriba:
01 jQuery(document).ready(function($){
02 $(window).scroll(function(){
03 if ($(this).scrollTop() < 200) {
04 $('#smoothup') .fadeOut();
05 } else {
06 $('#smoothup') .fadeIn();
07 }
08 });
09 $('#smoothup').on('click', function(){
10 $('html, body').animate({scrollTop:0}, 'fast');
11 return false;
12 });
13 });
¿Alguien puede ver cuál podría ser el problema?
Donald
Josh Patterson
¿Hay alguna forma de hacer que esto se desvanezca antes de llegar al final de la página?
jaybob
Hola, está funcionando bien. Gracias por el tutorial, pero solo tengo un problema, la imagen aparece muy rápido. ¿Puedo hacer algo para que aparezca más tarde / un poco más abajo, después de desplazarse?
Aaron
Esta es una forma muy limpia de lograr esto. De lejos, mi favorita que he encontrado.
Pregunta rápida... Lo he puesto en mi archivo footer.php... ¿Cómo puedo hacer que deje de quedarse fijo en un punto determinado? Por ejemplo, tengo un pie de página de 575px de alto y no quiero que el icono entre en esa área. Básicamente, detener la posición fija, digamos, a 600px del final de la página.
Ulv
¿Esta solución agregaría el archivo smoothscroll.js a la porción del archivo html o…?
emanuele
Hola,
¿es posible agregar scroll suave en el menú para desplazar la página?... He creado una plantilla de una sola página y quiero desplazarla con el menú... ¡gracias.
StefsterNYC
Si te entiendo bien, ¿quieres agregarlo a la navegación del menú principal? ¿Correcto? Simplemente usa el mismo nombre de selector pero cambia completamente el CSS. Para que la imagen no aparezca.
¿Tiene sentido?
Paul
¡Muchas gracias por este consejo! Sin embargo, tengo un problema. Cuando reduzco el tamaño de la pantalla, mi flecha desaparece mientras la quiero en un lugar específico.
¿Hay alguna forma de arreglar eso?
Gracias
Paul
Paul
Encontré una solución a mi problema. Solo tuve que cambiar mi CSS a:
#smoothup { top: 572px; left: auto; margin-left: -68px; }
Mushir
¡Gracias, hombre! Funciona como magia… ¡realmente alegraste mi día!
Steven Wolock
¡Gracias por esto! Funciona muy bien.
Pregunta: ¿Está bien ese corchete de cierre después de -webkit-transform: rotate(360deg)?
etech0
Configuré esto en mi sitio, ¡pero no veo el ícono! ¿Cómo puedo saber por qué no funciona?
¡Gracias!
Soporte de WPBeginner
Podría haber cualquier razón posible. Primero, asegúrate de haber subido la imagen, luego verifica que el background: url tenga la URL correcta y que conduzca a tu imagen. Finalmente, verifica que jquery y tu archivo .js se carguen. Por último, intenta ajustar los valores de CSS para display, position y text-indent.
Administrador
etech0
Ya lo resolví: tuve que cambiar la altura y el ancho de 40px para que coincidieran con mi imagen.
¡Gracias por un gran tutorial!
Alexander Gruzov
¡Gracias!