TOP BUTTON USING BS

`

<title>Página con Botón Ir Arriba (Ejemplo Completo)</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
    /* Estilos generales para hacer la página lo suficientemente larga para probar el scroll */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        height: 2500px; /* Incrementado para asegurar un scroll suficiente */
        padding: 20px;
        background-color: #f8f9fa;
        color: #333;
        line-height: 1.6;
    }

    h1, h2 {
        color: #0056b3;
    }

    p {
        margin-bottom: 1em;
    }

    .content {
        margin-top: 600px; /* Espacio para simular contenido largo antes de que aparezca el botón */
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .section {
        margin-bottom: 40px;
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        background-color: #fefefe;
    }


    /* --- Estilos del Botón "Ir Arriba" --- */
    #scrollToTopBtn {
        /* Oculto por defecto, se mostrará con JavaScript */
        display: none;
        /* Posicionamiento fijo en la esquina inferior derecha de la pantalla */
        position: fixed;
        bottom: 30px; /* Distancia desde la parte inferior */
        right: 30px; /* Distancia desde la parte derecha */
        z-index: 1000; /* Asegura que esté por encima de la mayoría de los elementos */

        /* Estilos de apariencia */
        border: none;
        outline: none;
        background-color: #007bff; /* Color azul de Bootstrap primario */
        color: white;
        cursor: pointer;
        padding: 15px; /* Relleno para que el botón sea cómodo al tacto */
        border-radius: 50%; /* Lo hace circular */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Sombra para darle profundidad */
        transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves al hover */

        /* Usamos flexbox para centrar el icono perfectamente */
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px; /* Ancho para mantenerlo circular */
        height: 50px; /* Alto para mantenerlo circular */
    }

    #scrollToTopBtn:hover {
        background-color: #0056b3; /* Color más oscuro al pasar el mouse */
        transform: translateY(-3px); /* Pequeño efecto de elevación */
    }

    /* Estilos específicos para el icono de Bootstrap Icons dentro del botón */
    #scrollToTopBtn .bi {
        font-size: 26px; /* Tamaño del icono. Ajusta a tu gusto */
        line-height: 1; /* Ayuda a asegurar la alineación vertical */
    }
</style>

<header>
    <h1>Bienvenido a la Página de Prueba</h1>
    <p>Esta página es un ejemplo para demostrar el funcionamiento del botón "Ir Arriba".</p>
</header>

<div class="content">
    <h2>Sección Superior</h2>
    <p>Aquí tienes contenido inicial. Baja el scroll para que el botón "Ir Arriba" se haga visible.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div style="height: 800px; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; margin: 40px auto; max-width: 800px; border-radius: 8px;">
    <p style="font-size: 1.2em; color: #555;">Contenido largo... sigue bajando.</p>
</div>

<div class="content">
    <h2>Sección Media</h2>
    <div class="section">
        <p>Más contenido para que la página sea larga y el botón tenga sentido. Imagina que aquí hay muchos párrafos, imágenes, etc.</p>
        <p>Mauris id velit vitae nisl consectetur malesuada. Proin at felis id dolor vestibulum tempor. In hac habitasse platea dictumst. Sed in urna non turpis aliquet tincidunt. Fusce a tellus non nisi accumsan ullamcorper.</p>
        <p>Nullam vel nisi at sapien sollicitudin elementum. Aenean facilisis, ipsum nec varius finibus, orci nisl finibus felis, nec efficitur enim massa a neque. Donec nec libero et odio ultrices tristique.</p>
    </div>
    <div class="section">
        <p>Otro bloque de contenido. Cuanto más contenido tengas, más útil será el botón "Ir Arriba".</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus at diam vel ex egestas faucibus. Morbi auctor, ipsum vel scelerisque eleifend, metus tortor sollicitudin lectus, vitae congue tortor velit a libero.</p>
        <p>Phasellus eget magna vel lectus blandit venenatis. Suspendisse potenti. Nam at felis a eros tincidunt lacinia nec vel justo.</p>
    </div>
</div>

<div style="height: 600px; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; margin: 40px auto; max-width: 800px; border-radius: 8px;">
    <p style="font-size: 1.2em; color: #555;">Casi llegamos al final... ¡El botón ya debería ser visible!</p>
</div>

<div class="content">
    <h2>Pie de Página</h2>
    <p>Has llegado al final de la página de ejemplo. ¡Ahora puedes usar el botón para volver al principio!</p>
    <p>&copy; 2025 Mi Página de Ejemplo. Todos los derechos reservados.</p>
</div>

<button id="scrollToTopBtn" title="Ir arriba">
    <i class="bi bi-arrow-up"></i> </button>

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

    // Cuando el usuario haga scroll, ejecutar la función 'scrollFunction'
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        // Si el scroll vertical de la página es mayor a 50 píxeles, muestra el botón
        // (document.body.scrollTop para Safari, document.documentElement.scrollTop para otros navegadores)
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            mybutton.style.display = "flex"; // Usamos 'flex' porque el botón es un flex container para centrar el icono
        } 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() {
        // Método moderno para scroll suave al tope
        window.scrollTo({
            top: 0,
            behavior: "smooth" // Hace el scroll suave y animado
        });

        // Fallback para navegadores antiguos que no soportan 'behavior: "smooth"'
        // (Aunque con window.scrollTo es menos necesario hoy en día)
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

`