Scroll top: Boton flotante moderno para devolver arriba del sitio web

Copiar código

<div style="text-align: center; margin: 20px 0;">
                        <a href="https://ariapsa.com/mb" target="_blank">
                            <img src="https://ariapsa.com/wp-content/uploads/2024/08/Marca-blanca-Diseno-de-paginas-web-mexico-ariapsa.jpg" alt="Banner" style="max-width: 100%; height: auto;">
                        </a>
                       </div>
/**
* Plugin Name: Botón Volver Arriba
* Description: Añade un botón flotante para volver al inicio de la página
* Version: 1.0
* Author: Ariapsa Mexico
*/
// Evitar acceso directo al archivo
if (!defined('ABSPATH')) {
exit;
}
/**
* Función para agregar el HTML y CSS del botón
*/
function agregar_boton_volver_arriba() {
?>
<style>
#btn-volver-arriba {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: #5aa23f;
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
#btn-volver-arriba.mostrar {
opacity: 1;
visibility: visible;
}
#btn-volver-arriba:hover {
background-color: #4c8835;
transform: translateY(-3px);
}
#btn-volver-arriba svg {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
#btn-volver-arriba {
width: 40px;
height: 40px;
line-height: 40px;
bottom: 15px;
left: 15px;
}
#btn-volver-arriba svg {
width: 18px;
height: 18px;
}
}
</style>
<div id="btn-volver-arriba" title="Volver arriba">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</div>
<script>
(function() {
// Esperar a que el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {
var botonVolverArriba = document.getElementById('btn-volver-arriba');
// Mostrar/ocultar el botón según la posición de desplazamiento
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
botonVolverArriba.classList.add('mostrar');
} else {
botonVolverArriba.classList.remove('mostrar');
}
});
// Funcionalidad para volver arriba al hacer clic
botonVolverArriba.addEventListener('click', function(e) {
e.preventDefault();
// Animación suave para desplazarse hacia arriba
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
})();
</script>
<?php
}
// Agregar el botón al pie de página en todas las páginas del sitio
add_action('wp_footer', 'agregar_boton_volver_arriba');