Los mejores complementos gratuitos de desplazamiento suave de WordPress 2022

Si ha creado un sitio web pero el contenido del sitio web es demasiado largo y no es fácil de entender en esta situación, puede utilizar los complementos de desplazamiento suave de WordPress.

Los complementos de desplazamiento suave de WordPress lo ayudarán a todos a desplazarse por el sitio web hacia arriba y hacia abajo sin problemas. No solo mejorará la experiencia de usuario de su sitio web, sino que también tendrá un efecto importante en la tasa de conversión. Porque su usuario estará comprometido en su sitio web durante más tiempo.

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

¿Se pregunta por qué otros sitios web tienen un efecto de desplazamiento suave hasta la parte superior de la página? Es ideal para agregar un efecto superior de desplazamiento suave si tiene una página larga.

Esto ayuda a mejorar la experiencia del usuario en su página y, al mismo tiempo, les facilita volver rápidamente a la parte superior.

Ahora la pregunta es, ¿cómo agrega un desplazamiento suave al efecto superior en su sitio de WordPress? Bueno, puedes hacerlo fácilmente usando jQuery. Aquí vamos a hablar sobre cómo puedes hacerlo fácilmente usando jQuery. Sigue leyendo:

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

En caso de que una página o una publicación tenga mucho contenido, los usuarios deben desplazarse hacia abajo para leerlos todos. A medida que los usuarios comienzan a desplazarse hacia abajo, sus enlaces de navegación comienzan a subir.

Cuando el usuario termina de leer, debe desplazarse para ver si le queda algo. Desplazarse hasta el botón superior permite al lector acceder rápidamente. Puede optar por agregar este enlace de texto sin necesidad de usar jQuery.

 <a href="#" title="Volver arriba">^Arriba</a>

Enviará a los lectores a la parte superior de la página mientras se desplaza hacia arriba en una fracción de segundo. Funciona como funcional.

Sin embargo, el desplazamiento suave es lo opuesto a esto. El desplazamiento suave ayuda al usuario a deslizarse hacia atrás al área superior de la página. Esto ayuda a mejorar la experiencia de los usuarios en su sitio.

¿Agregar desplazamiento suave al efecto superior con jQuery en WordPress?

Si desea agregar un desplazamiento suave al efecto superior, puede usar jQuery. Simultáneamente, deberá agregar algo de CSS junto con una sola línea para el código HTML en el tema de su WordPress.

Para comenzar con él, primero debe abrir un editor de texto, como el Bloc de notas. Ahora necesita crear un archivo y continuar para guardarlo como smoothscroll.js. Ahora necesita copiar y pegar un código en el área del archivo:

jQuery(documento).ready(función($){
$(ventana).scroll(función(){
si ($(esto).scrollTop() < 200) {
$('#suavizar') .fadeOut();
} 
demás {
$('#suavizar') .fadeIn();
}
});
   $('#suavizar').on('clic', función(){
$('html, cuerpo').animate({scrollTop:0}, 'rápido');
falso retorno;
});
});

Ahora necesitas guardar el archivo. Después de eso, puede cargarlo en la carpeta /js / del directorio de temas de WordPress. En caso de que su tema no tenga un directorio / js /, entonces debe comenzar con la creación de uno.

Después de eso, puede cargar smoothscroll.js en este directorio. Este código se denomina secuencia de comandos jQuery, que agregará un efecto de desplazamiento suave al botón. Básicamente, ayudará al usuario a ir sin problemas a la parte superior de la página.

Después de eso, debe agregar este smoothscroll.js a su área temática. Si desea hacer eso, debe agregar un script en WordPress. Aquí está el script o el bacalao que debe pegar en el archivo functions.php de su tema:

wp_enqueue_script('suavizar', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, true );
Este código envía a WordPress el comando del script. Al mismo tiempo, también le dice a WordPress que cargue la biblioteca jQuery ya que el complemento depende de ella.

Una vez que haya terminado de agregar la parte de jQuery, ahora debe agregar el enlace real al sitio de Word Press, que llevará al usuario de regreso al área superior. Debe pegar un código HTML en cualquier lugar del archivo footer.php de su tema:

 <a href="#arriba" title="Volver arriba"></a>

Este paso incluye la adición del enlace al archivo, pero no está vinculado con ningún texto. Es así, porque necesita usar un ícono de imagen para la flecha hacia arriba que le permitirá mostrar un botón de regreso al principio.
Así es como puede agregar un ícono de 40x40px a la hoja de estilo de su tema:

#suavizar { 
altura: 40px; 
ancho: 40px; 
posición: fija;
inferior: 50px;
derecha: 100px;
sangría de texto:-9999px;
pantalla: ninguno;
fondo: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
-webkit-transición-duración: 0.4s; 
-moz-transición-duración: 0.4s; transición-duración: 0,4 s; 
}
 
#suavizar: pasar el cursor {
-webkit-transformar: rotar (360 grados)}
fondo: url('') sin repetición;
}

En el CSS mencionado anteriormente, ha optado por poner hielo en la posición del icono de la imagen. También incluye el uso de un icono de imagen como imagen de fondo. Ahora necesita cargar su icono de imagen con la ayuda del cargador de medios de WordPress.

Luego puede obtener la URL de la imagen que debe pegar como URL de fondo. Como ha agregado una animación CSS al botón que sigue girando el botón, el usuario mantiene el puntero del mouse sobre el botón.

Ahora debe desplazarse hasta el efecto superior, que permitirá a los usuarios volver al área superior y encontrar qué más pueden hacer en su sitio web.

También puede agregar un pie de página flotante para que el contenido de la función se muestre fácilmente. En caso de que no desee que sus usuarios se desplacen al área superior para compartir el artículo, puede usar el complemento de barra flotante para compartir en redes sociales para que sea mucho más manejable.

Complementos de desplazamiento suave de 2022: muy livianos y rápidos

Los complementos de desplazamiento suave de WordPress seguramente funcionarán mucho más rápido y efectivo en todos los demás dispositivos y navegadores sin ninguna dificultad.

Además, funciona de maravilla con otros complementos como Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, creadores de páginas SKT, Visual Composer y Elementor, y muchos más.

Sitios web de empresas a gran escala o de empresas a pequeña escala, como blogs, sitios web de carteras, sitios web de consultoría, sitios web corporativos, sitios web relacionados con el comercio electrónico, agencias creativas, sitios web de bienes raíces, CV personales, sitios web de empresas minoristas, etc. Puede usar complementos de WordPress Smooth Scroll para mejorar la apariencia del sitio web.

Muchos complementos gratuitos de desplazamiento de WordPress están disponibles, pero hemos resaltado la mayoría de los complementos de desplazamiento suave que a todos sus visitantes les encantarán. Por favor verifique a continuación.

1. Desplazamiento de página a id:

Page scroll to id es un software de código abierto que está completamente caracterizado y provisto de características y funcionalidades bien desarrolladas. Le da un efecto de animación de desplazamiento suave.
El complemento de desplazamiento de página a id es ajustable. Con la ayuda de id y offset mencionados, este complemento calculará el tamaño de la página y lo configurará automáticamente.

2. Menú fijo (¡o cualquier cosa!) en Scroll:

El menú fijo (o cualquier cosa) en el complemento de desplazamiento está disponible sin costo alguno. te ayuda a hacer un menú o cualquier elemento pegajoso. Una vez que haga clic en un elemento adhesivo, lo desplazará directamente a la parte superior de la página. Solo necesita algunos o conocimientos básicos de HTML/CSS para simplemente sacar el elemento correcto que desea hacer pegajoso.

3. WordPress Infinite Scroll – Ajax Cargar más:

Ajax Load more está especialmente creado para un usuario de WordPress para que pueda desplazarse sin problemas por el sitio web. Ajax carga más ayuda a cargar publicaciones perezosas, publicaciones individuales, páginas y comentarios. Estos complementos son más conocidos por complementos de comercio electrónico como WooCommerce

4. Enlaces de desplazamiento suave y fácil:

Puede crear una característica de abajo hacia arriba por su cuenta. porque SEasy Smooth Scroll Links es un complemento personalizable y muy liviano.

Solo necesita elegir cualquiera de las imágenes para configurar los elementos de desplazamiento hacia arriba. Además, puede ajustar la posición del elemento a la izquierda, al centro o al lado derecho. Este complemento también es un software de código abierto.

5. Desplazamiento suave de MouseWheel:

El complemento MouseWheel Smooth Scroll es muy suave para desplazarse por todos los enlaces de anclaje. Por lo general, se coloca en el lado derecho que desplazará la página de abajo hacia arriba.

Por lo tanto, este complemento es compatible con RTL y no crea elementos de menú inútiles en el panel de control de WordPress.

6. Desplazamiento suave por WPOS:

Como el complemento Smooth Scroll by WPOS es liviano, se puede personalizar fácilmente el desplazamiento de arriba a abajo en cada página. No necesita escribir ni una sola línea de código.

Uno puede ajustar la velocidad de la animación, el tipo, la altura, el ancho, etc. según sus necesidades. Este complemento funciona mejor con el generador de páginas de Elementor

7. Desplazamiento simple al botón superior:

Se puede agregar un efecto de desplazamiento suave al enlace ancla pero en la misma página. Estos efectos se pueden aplicar a publicaciones y páginas completas o a publicaciones y páginas particulares. Puede encontrar esta configuración en la configuración del tablero>> Botón de desplazamiento simple hacia arriba.

- Elija para solicitar todas las publicaciones y páginas.
– Elija solo la página de inicio
– Elija las páginas particulares solamente
– Elija solo las publicaciones particulares
– Decidir la velocidad del scroll

8. NS Desplazamiento suave hacia arriba:

La Surbma tiene más usuarios activos. Como este complemento también es un desplazamiento suave. Puede obtener el efecto en cada enlace de anclaje en su sitio web. Se puede agregar un efecto de desplazamiento suave al menú o a cualquier parte de navegación.

Incluso no necesita personalizarlo porque no hay ninguna opción para este complemento. Si tiene conocimiento y experiencia sobre la programación de JavaScript y WordPress, puede realizar algunos cambios según sus necesidades. Pero si no lo tiene, le sugiero que no lo toque. ya que comenzará a funcionar inmediatamente después de la instalación.

9. Parte superior de desplazamiento frontal WPF:

Puede desplazarse fácilmente de abajo hacia arriba con el complemento WPFront Scroll Top. Es totalmente personalizable con diferentes opciones para elegir. Con algo de animación, se desplazará hacia arriba.
Puede crear texto, imágenes y botones por su cuenta. También puedes filtrar páginas y publicaciones.

10. Atrapa el pergamino infinito:

Catch Infinite scroll lo ayudará a aumentar la participación de los usuarios en su sitio web. La razón principal detrás de esto es un pergamino infinito Jetpack. Una vez que sus complementos estén instalados y activados, su cliente y usuario podrán desplazarse por la página del sitio web.

Todos estos son los mejores complementos gratuitos de WordPress Smooth Scroll 2022.