nuay
Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Mientras leemos un articulo o navegamos un sitio, siempre será importante tener un icono en la parte inferior derecha para regresar al top de este.
O sea, creo que todo sitio deberia de tenerlo.
Creo que tambien existen plugins que lo instalan, pero hice este pequeño codigo que pueden agregar a su archivo de functions. Esto usa Dashicons forzados por si acaso WP no lo quiere cargar.
Demo en el blog de mi firma. Saludos!
O sea, creo que todo sitio deberia de tenerlo.
Creo que tambien existen plugins que lo instalan, pero hice este pequeño codigo que pueden agregar a su archivo de functions. Esto usa Dashicons forzados por si acaso WP no lo quiere cargar.
Insertar CODE, HTML o PHP:
/**
* Botón "Volver Arriba" con Dashicons forzados
*/
function sp_scroll_top_script() {
// Esto asegura que los iconos de WordPress carguen para todo el mundo
wp_enqueue_style('dashicons');
?>
<div id="scroll-to-top" title="Subir"></div>
<style>
#scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 99999;
opacity: 0;
visibility: hidden;
border: none;
}
/* Forzamos que el icono use la fuente Dashicons */
#scroll-to-top::before {
content: "\f342"; /* Código de la flecha */
font-family: "dashicons" !important;
font-size: 30px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#scroll-to-top:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: translateY(-5px);
}
#scroll-to-top.visible {
opacity: 1;
visibility: visible;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const btn = document.getElementById("scroll-to-top");
window.addEventListener("scroll", function() {
if (window.pageYOffset > 400) {
btn.classList.add("visible");
} else {
btn.classList.remove("visible");
}
});
btn.addEventListener("click", function() {
window.scrollTo({ top: 0, behavior: "smooth" });
});
});
</script>
<?php
}
add_action('wp_footer', 'sp_scroll_top_script');Demo en el blog de mi firma. Saludos!
