Botón para Ir hacia Arriba de la Página con jQuery

Este botón es de gran utilidad para los usuarios de un sitio web, en especial cuando el contenido es extenso ya que le ahorra tiempo al usuario al no tener que hacer scroll para volver a la parte superior de la página.

 

En este post vamos a ver de qué manera crear ese botón con jQuery para que sea visible solo cuando el usuario haya hecho scroll en la página hacia abajo y que desaparezca una vez esté arriba.

Además, haremos una transición suave con un efecto de deslizamiento para que tenga un poco más de vistosidad.

Lo primero que debemos hacer para crear el botón es crear un enlace en algún lugar del sitio web donde vayamos a implementarlo (siempre y cuando sea dentro de las etiquetas body) de la siguiente manera.

<a href="#" class="scroll-top" title="Ir arriba">
    <i class="fa fa-angle-up"></i>
</a>

Estoy utilizando un icono de FontAwesome para que se visualice una flecha apuntando hacia arriba. Tu puedes hacerlo de la manera que desees.

Ahora configuramos los estilos necesarios para el posicionamiento y apariencia del botón.

a.scroll-top {
	color: #fff;
	display: none;
	width: 30px;
	height: 30px;
	position: fixed;
	z-index: 1000;
	bottom: 50px;
	right: 30px;
	font-size: 20px;
	background: #222;
	border-radius: 3px !important;
	text-align: center;
	border: 1px solid hsla(0, 0%, 78%, 0.3)
}
a.scroll-top i {
	position: relative;
	top: 2px;
}

Le damos dimensiones y una posición fija para ubicarlo justo donde deseamos con las propiedades bottom y right. Le aplicamos fondo, bordes redondeados y un borde gris transparente. También le damos posición al icono.

Ahora definimos una función jQuery que llevará a cabo la acción del botón.

$(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
        $('a.scroll-top').fadeIn('slow');

    } else {
        $('a.scroll-top').fadeOut('slow');
    }
});

$('a.scroll-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 600);
});

Con el objeto window y el método scroll de jQuery verificamos la posición actual del scroll para mostrar u ocultar el botón según sea el caso. En específico se mostrará el botón si el usuario ha desplazado 300px hacia abajo la página y se ocultará en caso contrario.
Luego se define la acción click del botón la cual recibe como parámetro la variable event que contiene toda la información del evento que se acaba de ejecutar (click) y se utiliza el método preventDefault para evitar el comportamiento por defecto del botón.
Finalmente se aplica una animación (desplazar hacia arriba) con el método animate que recibe dos parámetros: el primero es la animación a aplicar y el segundo la duración de tal animación.