Crear un botón "Go to the Top" con jQuery, HTML5 y CSS3

Cuando navegamos en una página web el contenido se muestra de arriba hacia abajo y si en algún momento deseamos regresar a la parte superior de la página entonces utilizamos la barra de desplazamiento vertical ubicada en el borde derecho de la ventana del navegador o simplemente giramos la rueda central de nuestro ratón. Sin embargo, hacer esto muchas veces dificulta la navegación o la hace incómoda para el usuario, sobre todo si usa un dispositivo móvil como una tablet/iPad o un smartphone/iPhone.

Una solución muy popular consiste en mostrarle al usuario un botón "Go to the Top" cuya única función es "Desplazarse hacia Arriba" y mostrar el contenido de la parte superior de la página. Veamos cómo podemos hacerlo con jQuery de manera fácil y práctica.

El código HTML es muy sencillo y consiste de una etiqueta <section> como contenedor principal dentro del cual se muestra un título <h1> y seis párrafos <p>.

<body>
<section class="container"> <h1>"Go to the Top" button with HTML5, CSS3 and jQuery</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisl sapien, eget vulputate arcu. Nam lobortis eleifend mattis. Donec at lacus nisi, sit amet aliquam libero. Vivamus facilisis turpis non augue ultrices viverra. Pellentesque sed purus massa, ut tincidunt mauris. Nulla malesuada varius neque eget mollis. Sed eu nunc id libero pharetra convallis eget vel odio. Suspendisse feugiat suscipit mi, ac dictum eros semper tempor. Sed eget ante massa, nec tincidunt nisl. Integer ultricies purus vitae enim fermentum accumsan. Morbi nec urna lacus, vel varius mauris. Nulla facilisi. Etiam id nisi quam, sed commodo lacus. Etiam vulputate tortor non erat mollis at imperdiet orci malesuada.</p> <p>Sed sodales venenatis ligula, quis ullamcorper mi dapibus eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus feugiat consequat auctor. Maecenas pretium lorem ac mi varius volutpat. Morbi porta venenatis sem, eget auctor nisl semper a. Mauris in ante quam. Sed sed malesuada lectus. Sed quis metus nunc, eu dictum lectus. Aliquam id sapien massa. Duis metus felis, malesuada vitae faucibus quis, pharetra posuere mauris. Vivamus sapien neque, rutrum a euismod eu, cursus nec odio. Fusce tempor elementum lectus, a auctor orci fringilla ut. Donec sed tellus eu lectus venenatis venenatis semper vel sem. Etiam ut libero orci, sed vulputate felis.</p> <p>Cras quis luctus elit. Vestibulum venenatis gravida neque, id elementum lacus consequat ac. Nulla semper pretium lobortis. Nulla porttitor felis non elit suscipit gravida. Nam eget quam ante, at blandit eros. Sed turpis augue, mattis nec laoreet quis, sodales eu nisi. Cras luctus orci sed nisl interdum nec eleifend diam lacinia. Donec et dolor eget neque aliquam cursus. Fusce aliquet neque sed mi tempor vitae consequat risus condimentum. Donec in tristique felis. Nam et accumsan lorem. Donec rutrum velit eu massa consectetur sollicitudin. Aenean neque ipsum, condimentum in placerat porta, gravida eget justo. Proin ultrices blandit purus sit amet vestibulum. Pellentesque sit amet tellus orci, nec condimentum risus. Cras sem justo, lobortis posuere pharetra et, fermentum vitae magna.</p> <p>Aenean sem nulla, auctor sed vulputate non, consectetur in lectus. Praesent vel nibh eget diam commodo pellentesque. Praesent tempus, erat et facilisis venenatis, metus turpis convallis est, eget bibendum libero nisl facilisis magna. Donec sed faucibus justo. Ut consectetur nisi et massa mollis a rhoncus ante auctor. Fusce egestas, neque eget venenatis consectetur, nunc enim sagittis sapien, sit amet dictum libero risus ac ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Maecenas cursus aliquam commodo. Nunc eu leo eu massa consectetur rhoncus. Vivamus blandit, risus in dignissim varius, lorem diam gravida diam, vitae molestie massa metus ut sem. Quisque est turpis, ornare at dapibus vel, tempus ut neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fermentum cursus sollicitudin. Nullam quam justo, tempor ut aliquet a, egestas ac orci. Nunc in tortor nec est mattis molestie id sit amet nisi. Sed nec massa quis turpis mattis lobortis ac ac purus. Aenean sapien erat, vestibulum a dignissim vitae, sagittis ac orci.</p> <p>Ut turpis massa, adipiscing pharetra dictum vel, viverra ut metus. Donec id lectus ante. Nullam nisl turpis, placerat sed ultrices id, cursus sed mi. Praesent dolor ante, egestas sed vehicula in, tempor sit amet ante. Phasellus ligula turpis, suscipit non ornare vitae, adipiscing ut dui. Ut pretium, metus vel dapibus vehicula, neque tortor rutrum erat, non rutrum mauris metus et lectus. Proin orci nisl, auctor at consectetur in, lobortis et lacus. Cras sed risus nunc, a feugiat enim. Morbi venenatis luctus nisl, et pellentesque neque fermentum vel. Proin at egestas nisi. Proin vitae tellus id risus fringilla bibendum. Aliquam viverra sollicitudin mauris, hendrerit ornare dolor porttitor sed.</p> </section>
</body

El objetivo es mostrar el botón "Go to the Top" cuando el contenido de la página se haya desplazado una cierta distancia desde el borde superior y cuando el usuario haga clic sobre él entonces se producirá un desplazamiento suave hacia arriba.

01 $(document).ready(function(){
02  $("body").append("<div class='scrollup'>Go to the Top</div>");
03  $(window).scroll(function(){
04    if ($(this).scrollTop() > 120) $('.scrollup').fadeIn();
05    else $('.scrollup').fadeOut();
06  });
07  $(document).on("click",".scrollup",function(e){
08    e.preventDefault();
09    $("html, body").stop().animate({ scrollTop: 0 }, "slow");
10  });
11 });

Veamos cómo funciona el código jQuery.

  • Línea 01: La función javascript estará disponible cuando se haya cargado el contenido de la página.
  • Línea 02: Se agrega al <body> una etiqueta <div class="scrollup"> con el texto "Go to the Top". Esta <div> es el botón propiamente dicho y estará oculto para el usuario (ver las reglas CSS para la clase "scrollup").
  • Línea 03: Esta función analiza el desplazamiento vertical desde el borde de la ventana hacia abajo,
  • Línea 04: si el desplazmiento es mayor a 120px entonces se muestra el botón con un efecto de desvanecimiento en la parte inferior derecha de la ventana del navegador (ver las reglas CSS para la clase "scrollup"),
  • Línea 05: en caso contrario, el botón se oculta con otro efecto de desvanecimiento.
  • Línea 07: Si se hace clic sobre el botón entonces
  • Línea 09: se ejecuta un suave desplazamiento vertical hacia la parte superior de la ventana del navegador. Según la línea 04, el botón desaparecerá.

Finalmente, personalizamos el aspecto visual a nuestro gusto mediante las reglas CSS.

body {
  background: gray;
  font-family: sans-serif;
}
.container {
  background: white;
  margin: auto;
  padding: 2em;
  width: 50%;
}
.container h1 {
  text-align: center;
}
.scrollup {
  background: red;
  bottom: 1.5em;
  color: white;
  cursor: pointer;
  display: none;
  padding: .25em .5em;
  position: fixed;
  right: 1.5em;
}

Puedes ver el funcionamiento del botón desde este enlace. Estás en libertad de modificar y adaptar todos los códigos según los requerimientos de tu proyecto.

Hasta la próxima. ¡Abur!

César Vargas-Machuca

César Vargas-Machuca

Diseñador web (UI/UX). Creador de sitios web adaptables al entorno del usuario (responsive web design) y optimizados para los motores de búsqueda (posicionamiento SEO). Lector frecuente. Apasionado por la buena música. Aprendiz empedernido. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero, ayer y hoy. Peruano, ¡siempre!