49 lines
1.1 KiB
HTML
49 lines
1.1 KiB
HTML
<style>
|
|
#btn-subir {
|
|
position: fixed;
|
|
bottom: 20%; /* 20px */
|
|
right: 15%; /* 20px */
|
|
font-weight: bold;
|
|
width: 1.5em; /* 50px */
|
|
height: 1.5em; /* 50px */
|
|
border-radius: 50%;
|
|
background: #333;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 2.5em; /*18px*/
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
|
transition: opacity 0.3s;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#btn-subir:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.oculto {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<button id="btn-subir" class="oculto">↑</button>
|
|
<script>
|
|
const btnSubir = document.getElementById('btn-subir');
|
|
|
|
// Mostrar u ocultar el botón según el scroll
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 300) { // Mostrar después de 300px de scroll
|
|
btnSubir.classList.remove('oculto');
|
|
} else {
|
|
btnSubir.classList.add('oculto');
|
|
}
|
|
});
|
|
|
|
// Función para subir al inicio
|
|
btnSubir.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth' // Desplazamiento suave
|
|
});
|
|
});
|
|
</script> |