A diferencia de otras opciones basadas en Jquery, desarrollé este botón usando solo javascript puro. No es un secreto mi obsesión por la busqueda del rendimiento, así que hoy les comparto mi versión del botón "ir arriba" más lijero y personalizable.
Instalar
Desde el panel de administración de Blogger, vamos a Temas > Personalizar > Opciones avanzadas > CSS Personalizado y aquí pegaremos el código css.
/*!
=> Plugin: scrollToTop
=> by zkreations.com | Daniel Abel
*/.scrollToTop {outline: none;border: none;font-size: 14px;cursor: pointer;}.scrollToTop svg {display: block;}.scrollToTop {position: fixed;opacity: 0;visibility: hidden;-webkit-transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;transition: transform .3s, visibility .3s, opacity .3s, background .3s;transition: transform .3s, visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;-webkit-transform: translateY(-2em);transform: translateY(-2em);}.scrollToTop.visible {visibility: visible;opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
/*
=> Personalizar
*/
/* Icono
--------------------------------------------*/
.scrollToTop svg {
fill: #FFFFFF; /* color */
}
/* Boton
--------------------------------------------*/
.scrollToTop {
background-color: rgba(0, 0, 0, 0.85); /* color de fondo */
box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 1px 7px rgba(0,0,0,0.25); /* sombra */
bottom: 1em; /* Separación inferior */
right: 1em; /* Separación derecha */
padding: .5em; /* relleno */
border-radius: 4px; /* borde redondeado */
}
.scrollToTop:hover {
background-color: rgba(0, 0, 0, 0.95); /* color de fondo (hover) */
}
No olvides guardar los cambios presionando el botón "Aplicar". Ahora nos vamos a dirigir a Temas > Editar HTML, buscamos
</body> y arriba de eso pegaremos el siguiente código:<!-- HTML-->
<button id="scrollToTop" class="scrollToTop">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<!-- Javascript -->
<script>//<![CDATA[
// Plugin: scrollToTop
// by zkreations.com | Daniel Abel
var scrollToTop = (function() {
var showButton = 600,
scrollSpeed = 1000;
function scrollTop(b) {
function a(d) {
c += Math.PI / (b / (d - e));
c >= Math.PI && window.scrollTo(0, 0);
0 !== window.scrollY && (window.scrollTo(0, Math.round(scrollTime + scrollTime * Math.cos(c))), e = d, window.requestAnimationFrame(a))
}
var scrollTime = window.scrollY / 2,
c = 0,
e = performance.now();
window.requestAnimationFrame(a)
}
var scrollPosition = window.scrollY,
scrollButton = document.getElementById("scrollToTop");
window.addEventListener("scroll", function() {
scrollPosition = window.scrollY;
showButton < scrollPosition ? scrollButton.classList.add("visible") : scrollButton.classList.remove("visible")
});
scrollButton.onclick = function() {
scrollTop(scrollSpeed)
}
})();
//]]></script>
Guarda los cambios y listo. Con eso ya tenemos instalado el botón "ir arriba" sin jquery.
Opciones
De momento solo he incluido 2 opciones y se encuentran en el código javascript, están resaltadas en amarillo y por defecto contienen el valor
600 y 1000. En la siguiente tabla se explican estos valores:showButton | number | Desplazamiento del scroll antes de mostrar el botón |
scrollSpeed | number | Velocidad de desplazamiento (1000 = 1 segundo) |
Espero que este aporte les sea de utilidad.
