Botón para "Ir Arriba" con jQuery

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 nos 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 nuestro sitio web, en especial cuando el contenido que contiene el mismo obliga a que el sitio sea extenso hacia la parte inferior ya que le ahorra tiempo al usuario al no tener que hacer scroll hacia arriba.

En este artículo vamos a ver de qué manera crear ese botón con jQuery para que aparezca 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 nuestro botón es crear un enlace en elgún lugar de nuestro sitio web (siempre y cuando sea dentro de las etiquetas body) de la siguiente manera:

<a href="#">Ir Arriba</a>

Luego vamos a darle los estilos CSS necesarios para su correcta visualización como se muestra a continuación:

/* Button style */
.scroll-top {
    width: 40px;
    height: 40px;
    opacity: 0.3;
    position: fixed;
    bottom: 50px;
    right: 30px;
    display: none;
    text-indent: -9999px;
    z-index: 1000;
    background: url('../img/up.png') no-repeat;
}
.scroll-top:hover {
    opacity: 0.8;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    -ms-transition: 0.3s all;
    transition: 0.3s all;
}

La segunda regla es opcional ya que solo le dará un efecto al colocar el puntero del ratón sobre el botón.

Finlamente vamos a crear la función jQuery que hará que nuestro botón ejecute la acción deseada:

$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('a.scroll-top').fadeIn();
        } else {
            $('a.scroll-top').fadeOut();
        }
    });
    
    $('a.scroll-top').click(function() {
        $("html, body").animate({scrollTop: 0}, 600);
        return false;
    });
});

Eso es todo, espero les resulte de utilidad y lo apliquen en sus sitios web para que los usuarios puedan volver a la parte superior de su página de una manera más sencilla.

Comentarios

Deja tu comentario

http://