Cómo agregar un desplazamiento suave al efecto superior en WordPress usando jQuery

¿Ha visto sitios web que agregan un desplazamiento suave a la parte superior de la página? Esto es excelente cuando tiene una página larga y desea brindarles a sus usuarios una manera fácil de volver a la parte superior. Recientemente, uno de nuestros lectores nos pidió que agreguemos un desplazamiento suave al efecto superior en WordPress. En este artículo, le mostraremos cómo agregar un desplazamiento suave al efecto superior en WordPress usando jQuery.

Nota: este tutorial fue creado para un usuario intermedio que se siente cómodo editando sus propios temas. Si desea utilizar un método de plugin, utilice desplazamiento suave de la página al plugin superior. Para aquellos que quieran aprender a hacer esto sin un plugin, sigan leyendo.

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

Cuando una página o publicación tiene mucho contenido, los usuarios se ven obligados a desplazarse hacia abajo para leer ese contenido. A medida que los usuarios se desplazan hacia abajo, todos los enlaces de navegación suben. Cuando los usuarios hayan terminado de leer el artículo, deben desplazarse hacia arriba para ver qué más pueden hacer en su sitio web. El botón Desplazarse hacia arriba envía rápidamente a los usuarios a la parte superior de la página. Puede agregarlo como un enlace de texto sin usar jQuery, así:

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

Simplemente envía a los usuarios a la parte superior de la página y se desplaza por toda la página en milisegundos. Es funcional, pero un poco como un bache en la carretera. El desplazamiento suave es lo opuesto a eso. Desplaza suavemente al usuario hasta la parte superior de la página. Esto crea un efecto agradable y mejora la experiencia del usuario.

Agregar un desplazamiento suave al efecto superior con jQuery en WordPress

Para agregar un desplazamiento suave al efecto superior, usaremos jQuery, algo de CSS y una sola línea de código HTML en su tema de WordPress. Primero abra un editor de texto como el Bloc de notas. Cree un archivo y guárdelo como smoothscroll.js. Copie y pegue 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;
		});
});

Guarde el archivo y cárguelo en su directorio de temas de WordPress /js/ carpeta (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene el /js/ directorio, luego crea uno y sube smoothscroll.js ahora. 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 agregar el archivo smoothscroll.js a tu tema. Para hacer esto correctamente, pondremos en cola el script en WordPress (más información en nuestra guía sobre cómo agregar correctamente scripts en WordPress). Copia y pega este código en tu tema. functions.php archivo.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

En el código anterior, le dijimos a WordPress que cargue nuestro script y cargue la biblioteca jQuery, así como nuestro plugin depende de él. Ahora que hemos agregado la parte jQuery, agreguemos un enlace real a nuestro sitio de WordPress que lleve a los usuarios a la parte superior. Pegue este HTML en cualquier lugar de su tema footer.php archivo.

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

Como notó, agregamos un vínculo, pero no lo vinculamos a ningún texto. Esto se debe a que usaremos un icono de imagen de flecha hacia arriba para mostrar un botón Volver al principio. En este ejemplo estamos usando un icono de 40x40px. Agréguelo a la hoja de estilo de su tema.

#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, usamos la posición fija para nuestro ícono de imagen y usamos un ícono de imagen como imagen de fondo. Puede cargar el icono de su imagen usando el cargador de medios de WordPress y luego obtener la URL de la imagen para pegarla como la URL de fondo. También hemos agregado una pequeña animación CSS al botón que gira el botón cuando un usuario pasa el mouse sobre él.

El efecto de desplazamiento hacia la parte superior permite a los usuarios volver a la parte superior y encontrar otras cosas que hacer en su sitio web. Otra cosa que puede hacer es agregar una barra de pie de página flotante como la que tenemos en nuestro sitio para mostrar contenido destacado. Si no desea que sus usuarios se deslicen hacia arriba para compartir su artículo, le recomendamos encarecidamente que utilice el plugin de la barra para compartir en redes sociales móviles como el que tenemos en TrucosWP.

Esperamos que este artículo lo haya ayudado a agregar un desplazamiento suave a la parte superior de la página en su sitio usando jQuery. Para ver otros usos excelentes de jQuery en WordPress, puede consultar nuestro artículo sobre las preguntas frecuentes sobre el acordeón de jQuery o el artículo sobre la carga lenta de imágenes.

¿Crees que es útil desplazarse hasta el efecto superior? Háganos saber dejando un comentario a continuación.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *