Categoría · Menús de Navegación Nivel de Dificultad · Principiante Publicado el · 22 de agosto de 2025

Botón de Volver al Inicio Animado

Botón animado que aparece al desplazarse hacia abajo y se desplaza suavemente de vuelta a la parte superior de la página.

#scroll #boton #animation #navigation #ux

Diseño Responsivo

Soporte para Modo Oscuro

líneas

232

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

200px

HTML

18

líneas

CSS

135

líneas

JavaScript

79

líneas


                <div class="back-to-top-demo">
  <div class="demo-content">
    <h3>Desplázate hacia Abajo para Ver el Botón</h3>
    <p>Esta es una demostración del botón de volver al inicio. Desplázate hacia abajo para verlo aparecer.</p>
    <div class="spacer"></div>
    <p>Sigue desplazándote...</p>
    <div class="spacer"></div>
    <p>Casi llegas...</p>
    <div class="spacer"></div>
    <p>¡Ahora desplázate hacia arriba para ver el botón en acción!</p>
  </div>
</div>

<button class="back-to-top" id="backToTopBtn">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M12 19V5M5 12l7-7 7 7"/>
  </svg>
</button>

              
18líneas
649caracteres
HTMLIdioma

Compatibilidad del Navegador

Chrome

≥ 50

Firefox

≥ 45

Safari

≥ 10

Edge

≥ 15

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas →