El botón volver arriba es de esos elementos que llevan décadas en la web y que casi nadie se molesta en hacer bien. Una flecha estática gris en la esquina y a otra cosa. Es una pena, porque es justo el tipo de micro-interacción que separa una web cuidada de una web "puesta".

Aquí van las cuatro técnicas que uso —según el proyecto— y cuándo conviene cada una.

1. GIF animado: la opción zero-code

Funciona en cualquier sitio, incluido WordPress con un widget de imagen y un enlace #top. Para crear el GIF puedes usar SVGator (drag-and-drop, exporta a SVG animado o GIF) o tomar prestado un icono base de IconScout o Flaticon y animarlo.

Ventaja: cero JavaScript, cero CSS, copy-paste y listo. Inconveniente: peso (cualquier GIF decente son 30-80 KB), aliasing en pantallas Retina y nada de control sobre cuándo aparece.

2. Font Awesome + una clase de animación

Si ya estás cargando Font Awesome, prácticamente todo el trabajo está hecho:

<a href="#top" class="back-to-top">
  <i class="fas fa-arrow-up fa-bounce"></i>
</a>

Las clases fa-bounce, fa-shake, fa-beat y fa-flip dan animación gratis. Cero JS adicional.

3. CSS + JavaScript: el clásico bien hecho

Es lo que uso por defecto cuando quiero control total. El truco está en que el botón aparezca con un fade-in suave cuando el usuario haya scrolleado lo suficiente, no en clavarlo siempre visible:

const btn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
  btn.classList.toggle('is-visible', window.scrollY > 300);
}, { passive: true });
btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

Acompáñalo de una transición CSS con easing ligeramente elástico (cubic-bezier(.34, 1.56, .64, 1)) y conseguirás ese pop sutil que hace que el botón se sienta vivo sin ser molesto.

4. Solo CSS, sin un solo gramo de JS

Si te peleas con un sitio donde no puedes meter JavaScript (un CMS antiguo, un email render…) puedes pintar la flecha entera con CSS:

.arrow-up {
  width: 18px; height: 18px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(-45deg);
}

Una animación con @keyframes y ya tienes movimiento sin tocar JS ni Font Awesome.

¿Cuál usar?

  • Sitio crítico de marca (storefront, portfolio): opción 3. Control total, ligera, accesible.
  • Blog ya con Font Awesome cargado: opción 2. Cinco minutos.
  • WordPress sin tocar código: opción 1. Lo más rápido.
  • Entornos restringidos (intranet, email): opción 4.

En esta misma tienda tienes funcionando la opción 3 (mira la esquina inferior derecha cuando bajes). Tarda 250 ms en aparecer, sale con scale-up elástico, y se reposiciona solo si el banner de cookies está visible. 30 líneas de JS y CSS scopeado al footer.