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:

icon_top

  • 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

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • Carlo_Andre

    Hola amigo disculpa en que parte pongo ese codigo yo utilizo blogger

    • Alberto

      Pues la verdad es que nunca he utilizado Blogger, pero supongo que sí,
      debes editar el código en la página principal.

      • Carlo_Andre

        Chuzo gracias igual aunque me gustaba este estilo de boton igual gracias

  • Angel Gutierrez

    Excelente amigo, Muchas gracias por compartir tus conocimientos!
    Un saludo

    • Jonatan Cordero Del Bianco

      Buenas tardes muchas gracias por compartir esto, una pregunta esoto sirve para una pagina creada desde photoshop y pasada a dreamweaver en html?

      Si es asi; que texto debo pegar en el head y en el boody)

      espero repuestas, y gracias nuevamente.

  • Grecia

    Muy bueno eh,sera que tienes por ahi el código para ir abajo pero con las mismas funciones y mismo boton?

    • Alberto

      Sería igual, pero en el scrollTop: en vez de 0, obtienes la altura del documento y haces scrollTop con esta altura.

      Para obtener la altura del documento puedes hacer algo así:

      var altura = $(“body”).height();

      $(‘.scrollup’).click(function(){
      $(“html, body”).animate({ scrollTop: altura }, 600);
      return false;
      });

  • Pingback: 10 snippets en jQuery que todo desarrollador web debería saber : Blog Reacción Estudio – Desarrollo web y mucho más()

  • http://agreste.bandcamp.com/ Agreste

    Muchas gracias por el aporte!

  • Butters

    Excelente, me funciono perfectamente. Gracias.

  • Alexis

    Hola. A mí no me funciono. Yo tengo una página en PHP. No me queda claro donde se pone ese código jquery. Antes del cierre de head? Gracias.

    • Alexis

      ya lo solucioné. Un saludo.

  • KaoruMishimaru

    ¡Excelente! Me encanto el tutorial ^^ me funciono a la perfeccion y le hice algunas modificaciones como cambiar la imagen y moverla un poco m.m

  • Andres Castro

    Gracias por el tutorial muy util

  • alfredo

    me funciono… solo falta comentar que la línea: va antes del código JQuery.

  • juan

    Hola, está excelente el aporte y su web, lo único que agregaría al estílo css sería z-index: 999999; para que no pase por detrás de las imágenes sino de frente

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR