Si nuestra página web tiene mucho contenido, es una buena idea proporcionar a nuestros visitantes una forma rápida para ir al comienzo de la página.

En este tutorial vamos a aprender a crear un botón que aparece y desaparece con jQuery.

Vamos a crear un botón con una posicion fija en la parte inferior derecha de la página, cuando pinchemos en él nos hará una bonita animación que nos llevará al comienzo de nuestro sitio web. Haremos el botón visible sólo si el visitante se ha desplazado del comienzo de la página (scroll), si es así el botón será visible.

• Primero insertamos el enlace del botón.

<a href="#" class="scrollup">Scroll</a>

• Ahora le añadimos el estilo al botón.

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

Como puedes ver, hemos definido la posición del botón como fija con 100px a la derecha y 50px del pie de la página. Hemos usado la propiedad «text-ident» para esconder el texto y mostrar el icono del botón. La propiedad «display:none;» hace que el botón sea invisible al principio.

El icono para el botón ‘icon_top.png‘ es el siguiente:

• Ahora queremos que el botón sea visible si navegamos hacia abajo. Esto lo podemos hacer con el evento scroll de jQuery.

$(window).scroll(function(){
   if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
   } else {
        $('.scrollup').fadeOut();
   }
});

La propiedad scrollTop obtiene la posición vertical actual de la barra de desplazamiento (barra de scroll). Si es superior a 100px, muestra el botón para ir arriba, si es inferior a 100px lo oculta.

• El siguiente paso es hacer la animación para ir arriba de la página web al pulsar el botón.
  

$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

La propiedad scrollTop:0 nos desplaza hacia el comienzo de la página web, en la posición 0px, y 600 representa la duración de la animación en milisegundos. Un valor más alto significa una animación más lenta. También puedes usar las propiedades predefinidas como ‘fast‘, ‘slow‘ o ‘normal‘ en vez de usar los milisegundos.

• Aquí está el código jQuery completo:

<script type="text/javascript">
    $(document).ready(function(){
 
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });
 
        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
 
    });
</script>

Ver ejemplo