Botón subir animado con javascript

Botón subir animado con javascript scroll to top without jquery

Demostración Gist

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. Si fue asi no olvides compartir este articulo en todas tus redes sociales, es algo que siempre valoro mucho.

Quizás te interese