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 suave de desplazamiento hacia arriba en WordPress usando jQuery y un plugin.

Cómo desplazarse al efecto superior usando jQuery

¿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 WordPress plugin 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 plugin. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un WordPress plugin.

Tras la activación, puede ir a Ajustes » Desplazarse hacia arriba desde tu panel de WordPress. Aquí puede configurar el plugin y personaliza 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.

Editar la configuración superior de desplazamiento de WPfrontEditar la configuración superior de desplazamiento de WPfront

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.

Más editar la configuración superior de desplazamiento de WPfrontMás editar la configuración superior de desplazamiento de WPfront

La parte superior de desplazamiento de WPFront plugin 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.

Elija dónde mostrar el efectoElija dónde mostrar el efecto

los plugin también ofrece diseños de botones prefabricados 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.

Elige un botón de imagenElige un botón de imagen

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.

Desplazarse a la vista previa del botón superiorDesplazarse a la vista previa del botón superior

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 subirlo a la /js/ carpeta 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 /js/ directorio, luego puede crear uno y cargar smoothscroll.js lo. 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 smoothscroll.js archivo 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 su tema functions.php expediente. No recomendamos editar directamente los archivos del tema porque el más mínimo error puede arruinar su sitio. En su lugar, puede utilizar un plugin me gusta 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() . ' array( 'jquery' ), '',  true );

En el código anterior, le hemos dicho a WordPress que cargue nuestro script y también cargue la biblioteca jQuery desde nuestro plugin depende de eso.

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 lugar de su tema 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 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("
-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 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 lo haya ayudado a agregar un desplazamiento suave al efecto superior en su sitio usando jQuery. Es posible que también desee ver nuestra selección experta de los mejores WordPress plugins para pequeñas empresas y nuestra guía paso a paso sobre cómo iniciar una tienda en línea.

, WordPress. Twitter y Facebook.

visto en: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.