Cómo agregar un efecto de desplazamiento suave hacia arriba en WordPress usando jQuery

¿Desea agregar un efecto de desplazamiento suave en la parte superior de la página en su sitio web de WordPress?

Un efecto de desplazamiento hacia la parte superior es excelente cuando tiene una página larga y desea brindarles a sus usuarios una manera fácil de volver a la parte superior. Ayuda a mejorar la experiencia de usuario de su sitio web.

En este artículo, le mostraremos cómo agregar un efecto de desplazamiento suave hacia arriba en WordPress usando jQuery y un complemento.

¿Qué es Smooth Scroll y cuándo debería usarlo?

A menos que el sitio tenga un menú de encabezado fijo, los usuarios que se desplazan hasta la parte inferior de una página o publicación larga de WordPress tienen que deslizar manualmente o desplazarse hacia la parte superior para navegar por el sitio.

Eso puede ser una verdadera molestia y, a menudo, los usuarios simplemente presionan el botón Atrás y se van. Es por eso que necesita un botón que envíe rápidamente a los usuarios a la parte superior de la página.

Puede agregar esta funcionalidad como un enlace de texto simple sin usar jQuery, así:

<a href="#" title="Back to top">^Top</a>

Eso enviará a los usuarios a la parte superior desplazándose hacia arriba en toda la página en milisegundos. Funciona, pero el efecto puede ser discordante, como cuando te encuentras con un bache en el camino.

El desplazamiento suave es lo opuesto a eso. Deslizará al usuario de regreso a la parte superior con un efecto visualmente agradable. El uso de elementos como este puede mejorar drásticamente la experiencia del usuario en su sitio.

Dicho esto, veamos cómo puede agregar un desplazamiento suave al efecto superior usando un complemento de WordPress y jQuery.

Cómo agregar un efecto suave de desplazamiento hacia arriba usando un complemento de WordPress

Este método se recomienda para principiantes, ya que puede 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 deberá hacer es instalar y activar el complemento WPFront Scroll Top. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Tras la activación, puede ir a Configuración » Desplazarse hacia arriba desde su panel de control de WordPress. Aquí puede configurar el complemento y personalizar el efecto de desplazamiento suave.

Primero, deberá hacer clic en la casilla de verificación 'Habilitado' para activar el botón de desplazamiento hacia arriba en su sitio. A continuación, verá opciones para editar el desplazamiento de desplazamiento, el tamaño del botón, la opacidad, la duración del desvanecimiento, la duración del desplazamiento y más.

Si se desplaza hacia abajo, encontrará más opciones, como editar el tiempo de ocultación automática, habilitar la opción de ocultar el botón en dispositivos pequeños y ocultarlo en la pantalla de wp-admin.

También puede editar lo que hace el botón cuando hace clic en él. De forma predeterminada, se desplazará hasta la parte superior de la página, pero puede cambiarlo para desplazarse a un elemento en particular en la publicación o incluso vincular a una página.

También hay una opción para cambiar la ubicación del botón. Aparecerá en la esquina inferior derecha de la pantalla de forma predeterminada, pero también puede elegir moverlo a cualquiera de las otras esquinas.

El complemento WPFront Scroll Top también ofrece filtros para mostrar el botón de desplazamiento hacia arriba solo en las páginas seleccionadas.

Normalmente, aparecerá en todas las páginas de tu blog de WordPress. Sin embargo, puede navegar a la sección 'Mostrar en páginas' y elegir dónde desea mostrar el efecto de desplazamiento hacia arriba.

El complemento también ofrece diseños de botones preconstruidos entre los que puede elegir. Debería poder encontrar fácilmente un diseño que coincida con su sitio.

Si no puede encontrar un botón de imagen preconstruido que funcione para usted, entonces hay una opción para cargar una imagen personalizada desde la biblioteca de medios de WordPress.

Cuando haya terminado, simplemente haga clic en el botón 'Guardar cambios'.

Ahora puede visitar su sitio web para ver el botón de desplazamiento hacia arriba en acción.

Adición de desplazamiento suave al efecto superior con jQuery en WordPress

Este método no se recomienda para principiantes. Es adecuado para personas que se sienten cómodas editando temas porque incluye agregar código a su sitio web.

Usaremos jQuery, algo de CSS y una sola línea de código HTML en su tema de WordPress para agregar el efecto de desplazamiento superior suave.

Primero, abra un editor de texto como el Bloc de notas y cree un archivo. Continúe y guárdelo como smoothscroll.js .

A continuación, deberá 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;
		});
});

Después de eso, puede guardar el archivo y cargarlo en la carpeta /js/ en su directorio de temas de WordPress. Para obtener más detalles, consulte nuestra guía sobre cómo usar FTP para cargar archivos en WordPress.

Si su tema no tiene un directorio /js/ , puede crear uno y cargar smoothscroll.js en él. También puede consultar nuestra guía sobre la estructura de archivos y directorios de WordPress para obtener más información.

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 cargar el archivo smoothscroll.js en su tema. Para hacer eso, pondremos en cola el script en WordPress.

Después de eso, simplemente copie y pegue este código en el archivo functions.php de su tema. No recomendamos editar directamente los archivos del tema porque el más mínimo error puede arruinar su sitio. En su lugar, puede usar un complemento como WPCode y seguir nuestro tutorial sobre cómo agregar fragmentos de código personalizados en WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/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 ello.

Ahora que hemos agregado la parte de jQuery, agreguemos un enlace real a nuestro sitio de WordPress que lleva a los usuarios a la parte superior. Simplemente pegue este HTML en cualquier parte del archivo footer.php de su tema. Si necesita ayuda, consulte nuestro tutorial sobre cómo agregar código de encabezado y pie de página en WordPress.

<a href="#top" id="smoothup" title="Back to top"></a>

Es posible que haya notado que el código HTML incluye un enlace pero no un texto de anclaje. Esto se debe a que usaremos un ícono de imagen con una flecha hacia arriba para mostrar un botón de regreso al principio.

En este ejemplo, estamos usando un ícono de 40x40px. Simplemente agregue el CSS personalizado a continuación a la hoja de estilo de su tema.

En este código, usamos un ícono de imagen como imagen de fondo del botón y lo configuramos en una posición fija. También hemos agregado una pequeña animación CSS, que gira 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úrese de reemplazar https://www.example.com/wp-content/uploads/2013/07/top_icon.png con la URL de la imagen que desea usar. Puede cargar su propio ícono de imagen usando el cargador de medios de WordPress, copiar la URL de la imagen y luego pegarla en el código.

Esperamos que este artículo lo haya ayudado a agregar un desplazamiento suave al efecto superior en su sitio usando jQuery. También es posible que desee ver nuestra selección experta de los mejores complementos de WordPress para pequeñas empresas y nuestra guía paso a paso sobre cómo iniciar una tienda en línea.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.