Ese pequeño botón que aparece al navegar hacia abajo y nos devuelve al inicio con un solo clic es un detalle de usabilidad clave. Aquí te enseño cómo implementarlo en tres simples pasos.

1. Estructura HTML

Lo primero es definir el botón. Copia y pega este bloque de código dentro del <body> de tu archivo HTML. Incluye un icono SVG para que se vea moderno desde el principio:

<button class="scrolltop-btn">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
    </svg>
</button>

2. Estilos y Personalización (CSS)

Para que el botón se ubique correctamente en la esquina inferior derecha y tenga una transición fluida, aplicaremos los siguientes estilos.

Tip de personalización: He configurado variables en :root para que puedas cambiar el color del botón (--btn-bg) o del icono (--btn-color) de forma instantánea.

:root {
    --btn-bg: #fa2649;
    --btn-color: #fff;
    --btn-shadow: #000000cb;
}

.scrolltop-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: none;
    background-color: var(--btn-bg);
    width: 40px; /* Cambia el ancho en px */
    height: 40px; /* Cambia la altura en px */
    border-radius: 10px;
    font-weight: bold;
    color: var(--btn-color);
    font-size: 25px;
    cursor: pointer;
    text-shadow: 1px 1px 5px var(--btn-shadow);
    box-shadow: 1px 1px 3px var(--btn-shadow);
    transition: all .3s ease-in-out;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Estado inicial: oculto */
    opacity: 0;
    pointer-events: none; 
}

.scrolltop-btn:hover {
    box-shadow: 2px 2px 5px var(--btn-shadow);
}

.scrolltop-btn:active {
    transform: scale(1.1);
}

/* Clase que se activará con JS */
.show {
    opacity: 1;
    pointer-events: auto;
}

Nota: Usamos pointer-events: none mientras la opacidad es 0 para evitar que el usuario haga clic accidentalmente en un botón invisible.

3. Lógica de funcionamiento (JavaScript)

Finalmente, necesitamos que el botón «escuche» el movimiento del scroll para aparecer o desaparecer, y que realice la acción de volver al inicio suavemente.

const scrolltopBtn = document.querySelector('.scrolltop-btn');

// Acción de volver al inicio
scrolltopBtn.addEventListener('click', () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth", // Desplazamiento suave
    });
})

// Mostrar/Ocultar botón según el scroll
window.onscroll = () => {
    if (window.scrollY > 20) {
        scrolltopBtn.classList.add('show');
    } else {
        scrolltopBtn.classList.remove('show');
    }
}

¡Y listo! Con esto ya tienes un botón funcional, elegante y totalmente personalizable para mejorar la navegación en tu sitio web.