¿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 a la parte superior es excelente si 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 tendrán que deslizar manualmente o desplazarse hacia atrás para navegar por el sitio.
Eso puede ser una verdadera molestia, y muchas veces 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, un poco como golpear un bache en el camino.
El desplazamiento suave es lo opuesto a eso. Hará retroceder al usuario con un efecto visualmente atractivo. El uso de dichos elementos puede mejorar drásticamente la experiencia del usuario en su sitio.
Dicho esto, echemos un vistazo a cómo agregar un desplazamiento suave hacia arriba 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 debe hacer es instalar y activar el Desplazamiento superior de WPFront enchufar. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Después de la activación, puede ir a Ajustes » Desplazarse hacia arriba desde tu panel de WordPress. Aquí puede configurar el complemento y ajustar el efecto de desplazamiento suave.
Primero, debe hacer clic en la casilla de verificación «Habilitado» para activar el botón «desplazarse hacia arriba» en su sitio. Luego 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 desplaza a 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. Aparece 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 proporciona 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 que aparezca el efecto de desplazamiento hacia arriba.
El complemento también ofrece diseños de botones preconstruidos para que elijas. Debería poder encontrar fácilmente un diseño que se ajuste a 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, 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.
Cómo agregar un desplazamiento suave al efecto superior con jQuery en WordPress
Este método no se recomienda para principiantes. Es adecuado para aquellos que están familiarizados con la edición de temas, ya que agrega 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.
Luego debe 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;
});
});
A continuación, puede guardar el archivo y subirlo a la /js/ carpeta en su carpeta de temas de WordPress. Para obtener más información, consulte nuestra guía sobre cómo usar FTP para cargar archivos en WordPress.
Si tu tema no tiene ninguno /js/ carpeta, luego puede crear una y cargarla smoothscroll.js Hacia eso. También puede consultar nuestra guía de archivos y estructura de directorios de WordPress para obtener más información.
Este código es el script jQuery que agrega 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 el smoothscroll.js archivo en su tema. Para hacer eso, pondremos en cola el script en WordPress.
Luego copia y pega este código en tus temas. functions.php Expediente. No recomendamos editar los archivos del tema directamente, ya que el error más pequeño puede dañar su sitio. En su lugar, puede usar un complemento como Código WP y siga 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 dijimos a WordPress que cargara nuestro script y también cargara la biblioteca jQuery porque nuestro complemento depende de ello.
Ahora que hemos agregado la parte de jQuery, agreguemos un enlace real a nuestro sitio de WordPress que llevará a los usuarios a la parte superior. Simplemente pegue este HTML en cualquier lugar de sus temas footer.php Expediente. 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 contiene un enlace, pero no un texto de anclaje. Esto se debe a que usaremos un ícono de imagen con una flecha hacia arriba para representar un botón de regreso al principio.
En este ejemplo usaremos un icono de 40x40px. Simplemente agregue el CSS personalizado a continuación a la hoja de estilo de su tema.
En este código, usaremos un ícono de imagen como imagen de fondo del botón y lo estableceremos 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;
}
Asegúrese de reemplazar en el CSS anterior https://www.example.com/wp-content/uploads/2013/07/top_icon.png con la URL de la imagen que desea utilizar. 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 le haya ayudado a desplazarse hacia arriba sin problemas en su sitio con jQuery. También puede consultar nuestra selección experta de los mejores complementos de WordPress para pequeñas empresas y nuestra guía paso a paso para iniciar una tienda en línea.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.