Instalar Botón subir animado con javascript

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;z-index: 9999;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:

<button class="scrollToTop" id="scrollToTop">
   <svg height="35" viewbox="0 0 24 24" width="35" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z">
      <path d="M0 0h24v24H0z" fill="none">
   </path></path></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.