<div class="back-to-top-demo">
<div class="demo-content">
<h3>Desplázate hacia Abajo para Ver el Botón</h3>
<p>Esta es una demostración del botón de volver al inicio. Desplázate hacia abajo para verlo aparecer.</p>
<div class="spacer"></div>
<p>Sigue desplazándote...</p>
<div class="spacer"></div>
<p>Casi llegas...</p>
<div class="spacer"></div>
<p>¡Ahora desplázate hacia arriba para ver el botón en acción!</p>
</div>
</div>
<button class="back-to-top" id="backToTopBtn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</button>
.back-to-top-demo {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 30px;
color: white;
text-align: center;
}
.demo-content h3 {
margin: 0 0 20px 0;
font-size: 1.8rem;
font-weight: 600;
}
.demo-content p {
margin: 20px 0;
font-size: 1.1rem;
opacity: 0.9;
}
.spacer {
height: 200px;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
z-index: 1000;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.back-to-top:active {
transform: translateY(-1px) scale(1.05);
}
.back-to-top svg {
width: 24px;
height: 24px;
}
/* Animación de pulso */
.back-to-top.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
100% {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
}
/* Indicador de progreso de desplazamiento */
.back-to-top::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 50%;
background: conic-gradient(transparent, #667eea, transparent 30%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.back-to-top.progress::before {
opacity: 1;
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Responsivo */
@media (max-width: 768px) {
.back-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
.back-to-top svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.back-to-top {
bottom: 15px;
right: 15px;
width: 40px;
height: 40px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Obtener elementos del DOM
const backToTopBtn = document.getElementById('backToTopBtn');
// Mostrar/ocultar botón según la posición de desplazamiento
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
// Agregar indicador de progreso según la posición de desplazamiento
updateScrollProgress();
});
// Desplazarse al inicio cuando se hace clic en el botón
backToTopBtn.addEventListener('click', function() {
// Agregar animación de clic
this.classList.add('pulse');
// Desplazarse al inicio con comportamiento suave
window.scrollTo({
top: 0,
behavior: 'smooth'
});
// Eliminar clase de animación después del retraso
setTimeout(() => {
this.classList.remove('pulse');
}, 2000);
});
// Actualizar indicador de progreso de desplazamiento
function updateScrollProgress() {
const scrollTop = window.pageYOffset;
const docHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;
// Agregar clase de progreso cuando se desplaza
if (scrollPercent > 0) {
backToTopBtn.classList.add('progress');
} else {
backToTopBtn.classList.remove('progress');
}
}
// Manejar desplazamiento suave para enlaces de anclaje
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Agregar accesibilidad por teclado
backToTopBtn.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.click();
}
});
// Agregar retroalimentación táctil para móviles
backToTopBtn.addEventListener('touchstart', function() {
this.style.transform = 'translateY(-1px) scale(1.05)';
});
backToTopBtn.addEventListener('touchend', function() {
this.style.transform = '';
});
});