Aprende a crear un botón de “Ir arriba” en HTML y CSS para mejorar la navegación en tu página web. Descubre cómo fijarlo en pantalla, personalizar su diseño y lograr un efecto de desplazamiento suave.
Un botón de “Ir arriba” es una excelente forma de mejorar la usabilidad en páginas largas. En este tutorial, creado por AsensiDev, aprenderás a diseñar un botón fijo con HTML y CSS, que al hacer clic desplaza al usuario suavemente hasta la parte superior de la página.
Requisitos previos
Antes de comenzar, asegúrate de contar con lo siguiente:
- Visual Studio Code instalado.
- Live Server activado para previsualizar cambios en tiempo real.
- Archivos index.html y styles.css creados en tu carpeta de proyecto.
Paso 1: Crear la estructura en HTML
En tu archivo index.html, agrega el siguiente código para generar el botón de “Ir arriba” y enlazarlo a la parte superior de la página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón Ir Arriba</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/TU_CODIGO_KIT.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<h1>Estás arriba de la web</h1>
</header>
<main>
<p>Simulación de contenido extenso...</p>
<!-- Se repite varias veces para probar el scroll -->
<p style="height: 2000px;"></p>
</main>
<a href="#header" class="scroll-top">
<i class="fas fa-arrow-up"></i>
</a>
</body>
</html>🔹 Explicación del código:
<a href="#header">: El botón enlaza a la parte superior mediante elid="header".<i class="fas fa-arrow-up">: Usa un ícono de Font Awesome para la flecha.<p style="height: 2000px;">: Simula una página larga con contenido.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
scroll-behavior: smooth; /* Hace que el scroll sea suave */
}
.scroll-top {
position: fixed;
bottom: 15px;
right: 15px;
background-color: #6200ea;
color: white;
padding: 12px;
border-radius: 50%;
text-align: center;
font-size: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.scroll-top:hover {
transform: translateY(-5px);
background-color: #4500b3;
}
.scroll-top i {
color: white;
}
🎨 ¿Qué mejoras aplicamos?
- Botón flotante en la parte inferior derecha.
- Diseño redondo con sombra para mejor visibilidad.
- Efecto de elevación al pasar el mouse (
hover). - Desplazamiento suave con
scroll-behavior: smooth.
Paso 3: Agregar desplazamiento suave
El atributo scroll-behavior: smooth; en CSS hace que el desplazamiento al hacer clic en el botón sea progresivo y no brusco.
Si tu sitio no aplica el scroll suave, usa este código en JavaScript (script.js):
document.querySelector('.scroll-top').addEventListener('click', function (event) {
event.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
💡 ¿Cómo funciona el código?
- Captura el clic en el botón de “Ir arriba”.
- Previene el comportamiento predeterminado del enlace.
- Usa
window.scrollTo()para desplazarse arriba con efecto suave.
Tambien lee:
Mira el tutorial completo
Este contenido forma parte del tutorial creado por AsensiDev. Si prefieres seguir el proceso en video, aquí tienes el enlace: 👇
