TOP BUTTON HTML JS DEMO

<title>Página con Botón Ir Arriba</title> <style> body { font-family: sans-serif; height: 2000px; /* Para que la página sea lo suficientemente larga para hacer scroll */ padding: 20px; background-color: #f4f4f4; }

    /* Estilos del botón */
    #scrollToTopBtn {
        display: none; /* Oculto por defecto */
        position: fixed; /* Fijo en la pantalla */
        bottom: 20px; /* Distancia desde la parte inferior */
        right: 30px; /* Distancia desde la parte derecha */
        z-index: 99; /* Asegura que esté por encima de otros elementos */
        font-size: 18px; /* Tamaño del texto/icono */
        border: none; /* Sin borde */
        outline: none; /* Sin contorno al hacer clic */
        background-color: #007bff; /* Color de fondo */
        color: white; /* Color del texto/icono */
        cursor: pointer; /* Cambia el cursor al pasar por encima */
        padding: 15px; /* Espaciado interno */
        border-radius: 10px; /* Bordes redondeados */
        transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    }

    #scrollToTopBtn:hover {
        background-color: #0056b3; /* Color de fondo al pasar el mouse */
    }

    .content {
        margin-top: 800px; /* Espacio para simular contenido largo */
        text-align: center;
    }
</style>

<h1>Bienvenido a mi sitio web</h1>
<p>Este es un ejemplo de contenido en la parte superior de la página.</p>

<div class="content">
    <p>Baja el scroll para ver el botón "Ir arriba".</p>
    <p>Aquí hay mucho contenido para que la página sea larga y puedas probar la funcionalidad del scroll.</p>
    <p>Sigue bajando...</p>
    <p>Más contenido...</p>
    <p>Casi llegamos al fondo...</p>
    <p>Este es el final de nuestro contenido de ejemplo.</p>
</div>

<button id="scrollToTopBtn" title="Ir arriba">⬆️</button>

<script>
    // Obtener el botón
    let mybutton = document.getElementById("scrollToTopBtn");

    // Cuando el usuario haga scroll hacia abajo 20px desde el top, muestra el botón
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block"; // Muestra el botón
        } else {
            mybutton.style.display = "none"; // Oculta el botón
        }
    }

    // Cuando el usuario haga clic en el botón, regresa al tope de la página
    mybutton.onclick = function() {topFunction()};

    function topFunction() {
        // Para navegadores modernos
        window.scrollTo({
            top: 0,
            behavior: "smooth" // Hace el scroll suave
        });

        // Para navegadores antiguos (compatibilidad)
        document.body.scrollTop = 0; // Para Safari
        document.documentElement.scrollTop = 0; // Para Chrome, Firefox, IE y Opera
    }
</script>