Crear un botón Ir arriba con CSS y jQuery

El botón de volver arriba es algo que muchos de vosotros probablemente hayáis visto en diferentes sitios web. Se trata de una flecha que aparece en la esquina inferior derecha de la página web cuando empiezas a desplazarte. Cuando se hace clic en ella, se vuelve a la parte superior de la página.

Si quieres añadir el botón "Ir arriba" a tu sitio web, o simplemente te interesa cómo crear uno por tu cuenta, has llegado al lugar correcto.

Volver arriba

Nuestro código constará de dos partes: un estilo de CSS y un pequeño script de jQuery. Comencemos con CSS.

Estilos CSS para el botón

Comenzamos con la creación de estilos y marcas para nuestro botón. Aquí está la parte de HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

El botón tendrá una sola etiqueta de anclaje con ID button. También incluimos un enlace a la biblioteca FontAwesome para que podamos usar un icono para nuestro botón.

Los estilos iniciales para el botón se verán así:

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;

}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Como el botón es un elemento de anclaje, y los anclajes por defecto son elementos en línea, necesitamos cambiar la propiedad  display al bloque en línea para que podamos asignarle dimensiones.

Hagamos que sea un botón cuadrado de 50*50px con esquinas redondeadas de 4px. Lo haremos del color naranja brillante y con un margen de 30 píxeles por cada lado.

La posición fija deja que nuestro botón siempre permanezca en el mismo lugar cuando desplazamos por la página, y z-index de un número muy alto asegura que el botón siempre se coloca por encima de otros elementos del sitio web.

Cuando pasamos el cursor sobre este botón, el cursor se cambia a un puntero y el fondo se vuelve gris oscuro. Para facilitar la transición, asignamos la transición de 0,3 segundos a la propiedad background-color. Además, cuando hacemos clic en el botón, el color de fondo también se cambia y se vuelve un poco más claro.

Adición del icono

Por el momento nuestro botón está vacío, así que, vamos a añadir un icono. Lo hacemos al añadir un pseudo-elemento ::after de la siguiente manera:

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

Vamos a elegir un icono de la biblioteca de fuentes más popular FontAwesome. En este caso optamos por un icono de Chevron Up.

Para mostrarlo en un pseudo-elemento, establece font-family como FontAwesome y asigna el valor Unicode de tu icono a la propiedad content.

También asegúrate de que la altura de tu línea sea igual a la altura de tu icono si deseas que se centre horizontalmente.

Adición de la funcionalidad con jQuery

En esta subsección te mostraremos cómo hacer que el botón funcione como se espera. La forma más sencilla de lograr esto es utilizar una biblioteca JavaScript jQuery. En primer lugar, debemos añadir jQuery al HTML de nuestro código. Añade la siguiente línea de código justo antes de la etiqueta de cierre body.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Ahora podemos escribir nuestro script usando la sintaxis de jQuery. Agrega la siguiente secuencia de comandos después de la línea de jQuery:

<script>

jQuery(document).ready(function() {
  
  var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

});

</script>

Examinemos este script.

Presta atención a la primera línea de código:

jQuery(document).ready(function() {

Básicamente se trata de que se ejecute el código dentro de esta función sólo cuando el documento está completamente cargado. Esta es una gran manera de evitar errores, en caso de que tu código JavaScript quiera realizar cambios en las partes de la página web que no están completamente cargadas en el navegador.

El código que se ejecuta después de que el documento está completamente cargado consta de dos partes principales y cada una de ellas está haciendo lo suyo.

La primera parte del script hace que nuestro botón aparezca y desaparezca después de que se desplace por la página hasta un cierto punto. La segunda parte hace que la página se vuelva a la parte superior después de hacer clic en el botón. Examinemos cada una en detalle.

Hacer que el botón aparezca y desaparezca

Este es el código que hace el truco:

 var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

Primero configuramos una variable btn y la asignamos a un elemento con una ID de button, de modo que sea más fácil para nosotros referirnos a ella luego en el código. También esto ayuda a JavaScript a hacer cálculos más rápido. Una vez que almacenamos el elemento en una variable, JavaScript no necesitará buscar por toda la página una y otra vez, cada vez que necesitemos usarlo de nuevo en nuestro código.

.scroll()

jQuery tiene una función útil .scroll(). Lo que hace es vincular una pieza de código que se ejecutará cada vez que ocurre un evento de desplazamiento en tu página web. Tiene un parámetro que es una función que se ejecuta cada vez que se ocurre un desplazamiento por la página. Aunque puedes aplicarla a cualquier elemento desplazable, como marcos y elementos con propiedades de desbordamiento, generalmente la aplicamos al elemento de ventana, ya que es ahí donde se realiza el desplazamiento en la mayoría de los casos.

$(window).scroll(function() {

Dentro de la función colocamos esta declaración if/else:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Lo que intentamos hacer aquí es verificar la posición vertical de la barra de desplazamiento y hacer que nuestro botón aparezca cuando está por debajo de cierto punto, y desaparecer cuando está por encima de ese punto.

Para obtener la posición actual de la barra de desplazamiento, vamos a utilizar un método incorporado de jQuery .scrollTop(). No toma ningún argumento, y simplemente devuelve una cantidad de píxeles que está oculta sobre el área desplazable.

Entonces, cada vez que desplazamos, JavaScript verifica cuántos píxeles están ocultos y los compara con el número determinado. En nuestro caso, ese número es 300, pero puedes cambiarlo si lo deseas.

Si pasamos por 300px, agregamos una clase show a nuestro elemento de botón, que lo hará aparecer. Si el número es menor de 300, eliminamos esa clase. Agregar y eliminar clases es otra razón por la cual jQuery es tan popular. Podemos hacerlo con dos métodos simples addClass() y removeClass().

Sin embargo, todavía no tenemos la clase show en nuestro CSS, así que, vamos a agregarla:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

De manera predeterminada nuestro botón estará oculto, por lo que tendremos que agregar algunas reglas más al elemento #button :

#button {
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}

Para facilitar la transición, añadimos dos valores más a los atributos de la transición, la opacidad y visibilidad se establecen como 0.5 segundos.

Desplazarse hacia la parte superior

La segunda parte del script te permite desplazarte hacia la parte superior de la página después de que hagas clic en el botón.

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

El primer método de jQuery que vemos aquí es on(). Su primer parámetro es el evento de "clic" de JavaScript, que se produce cada vez que hacemos clic del ratón en nuestro navegador. El segundo parámetro es una función de controlador, que se activa tan pronto como ocurre el evento.

La función de controlador requiere un parámetro de evento. Podemos darle cualquier nombre que queramos, pero usualmente se usa e o event. Necesitamos el parámetro de evento para pasarlo a la función y usarlo para el método preventDefault().

El método e.preventDefault() impide que la acción predeterminada del evento suceda, por ejemplo, un enlace no nos lleva a la página siguiente. En nuestro caso no es crucial, ya que nuestro elemento delimitador falta el atributo href  y, de todos modos, no nos llevaría a una página nueva, pero siempre es mejor verificarlo dos veces.

.animate()

El método jQuery .animate() es el que hace todo el truco.

    $('html, body').animate({scrollTop:0}, '300');

El primer parámetro del método .animate() es la lista de propiedades que debemos animar. Nuestra propiedad se llama scrollTop, y queremos que tenga un valor de 0. El tipo de este parámetro es un objeto simple y es por eso que necesitamos usar llaves y escribir nuestros valores usando la sintaxis de par clave/valor.

El segundo parámetro es la velocidad con la que queremos que se ejecute nuestra animación. Se mide en milisegundos y cuánto mayor es el número, más lenta es la animación. El predeterminado es 400, pero lo cambiamos a 300.

Finalmente, aplicamos el método animado a los elementos de HTML y cuerpo en nuestra página web.

Ahora cada vez que se hace clic en el botón, se nos llevará a la parte superior de la página.

Pensamientos finales

Los botones Volver arriba son excelentes elementos de usabilidad de una página web, y tener uno en tu sitio web es un detalle pequeño pero útil al que la mayoría de nosotros estamos acostumbrados. Esperamos que esta guía te ayude a ampliar tus conocimientos de CSS y JavaScript.

Fuente: "Creating a Back to Top Button with CSS & jQuery" por Matthew Cain