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

 

¿Ha visto sitios web que agregan un desplazamiento suave al efecto de la parte superior de la página? Esto es ideal si tiene un lado largo y desea brindarles a sus usuarios una manera fácil de volver a la cima. Recientemente, uno de nuestros lectores nos preguntó si queríamos agregar 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 entusiasta del bricolaje que puede editar fácilmente sus temas. Si desea utilizar un método de complemento, utilice Desplácese por el lado liso hasta el complemento superior. Para aquellos que quieran aprender a hacer esto sin un complemento, sigan leyendo.

¿Qué es Smooth Scroll y cuándo se usa?

Desplácese hasta el ejemplo anterior

Cuando una página o publicación tiene mucho contenido, los usuarios deben desplazarse hacia abajo para leer ese contenido. Cuando los usuarios se desplazan hacia abajo, todos los enlaces de navegación se mueven hacia arriba. Después de leer este artículo, los usuarios deberán desplazarse hacia arriba para ver qué más se debe hacer en su sitio. El botón Desplazarse hacia arriba lleva a los usuarios a la parte superior de la página rápidamente. Puede agregar esto como un enlace de texto sin usar jQuery de la siguiente manera:

<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 hacia arriba por toda la página en milisegundos. Es funcional, pero como un bache en la carretera. Smooth Scroll es lo opuesto a eso. El usuario puede regresar fácilmente a la parte superior de la página. Esto crea un efecto agradable y mejora la experiencia del usuario.

Adición de 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 diseño 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 tu sujeto no tiene uno /js/ Directorio, luego cree uno y cárguelo smoothscroll.js a. 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.

A continuación, debe agregar eso smoothscroll.js sobre su tema. Para hacer esto bien, vamos a poner en cola el script en WordPress (consulte nuestra guía sobre cómo agregar correctamente scripts en WordPress para obtener más información). 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 cargara nuestro script y también la biblioteca jQuery ya que nuestro complemento depende de él. Ahora que hemos agregado la parte jQuery, puede agregar un enlace real a nuestro sitio de WordPress que traerá a los usuarios a una copia de seguridad. Pegue este código HTML en cualquier lugar de su tema footer.php Archivo.

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

Como notó, agregamos un enlace, pero no adjuntamos ningún texto. Eso es porque estamos usando un ícono con una flecha hacia arriba para mostrar un botón de atrás hacia arriba. En este ejemplo, estamos usando un símbolo de 40x40px. Agregue esto 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("http://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 una posición fija para nuestro ícono y un ícono como imagen de fondo. Puede cargar el icono de su imagen utilizando el cargador de medios de WordPress y luego pegar la URL de la imagen como la URL de fondo. También agregamos 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 hasta la parte superior permite a los usuarios volver a la parte superior y encontrar otra actividad en su sitio web. También puede agregar un pie de página flotante como el que tenemos en nuestro sitio web para mostrar el contenido destacado. Si no desea que sus usuarios se desplacen hacia arriba para compartir su artículo, le recomendamos encarecidamente que utilice el complemento flotante de la barra de intercambio social como el que tenemos en WPBeginner.

Esperamos que este artículo le haya ayudado a agregar un desplazamiento suave a la parte superior de su sitio usando jQuery. Para ver algunos otros usos interesantes de jQuery en WordPress, puede consultar nuestro artículo de Acordeón de preguntas frecuentes de jQuery o el artículo Carga de imágenes demoradas.