Botón para ir arriba de la página con jQuery

Botón para ir arriba de la página con jQuery
  • Eborio Linárez
  • December 22, 2013
  • 0

Hoy en día es común encontrar en los sitios web un pequeño botón en la parte inferior de la página (comúnmente en la parte inferior derecha) que al pulsarlo permite ir hacia la parte superior de la página, ese es el famoso botón Ir Arriba, Volver Arriba, Subir, en fin como ustedes deseen llamarlo.

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.

Ahora probemos el código en vivo.

See the Pen QgeVWZ by Eborio Linárez (@eborio) on CodePen.

El ejemplo posee algunas modificaciones en el JavaScript para conseguir que el botón se muestre más rápido.

Con esto finalizamos el post. Espero haya sido de tu gusto, lo implementes en tus sitios web y lo compartas en tus redes sociales. Nos vemos en la próxima.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario