boton ir arriba sin jquery scroll to top without jquery

Demo en Codepen

En esta ocasión, desarrollé este botón usando solo javascript puro, que a diferencia de otras opciones basadas en Jquery, este botón "ir arriba" es más ligero y sin dependencias.


Contenido


Instalar

Desde el panel de administración de Blogger, vamos a Temas Personalizar Opciones avanzadas Agregar CSS y pegaremos el siguiente código:


/*!
 * ScrollToTop v2.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (No modificar) {{*/
 .scrollToTop {
   outline: none;border: none;
   font-size: 14px;cursor: pointer;
}
.scrollToTop svg {display: block;}
.scrollToTop {
   position: fixed;z-index: 9999;opacity: 0;pointer-events: none;
   transition: opacity .3s, background .3s, -webkit-transform .3s;
   transition: transform .3s, opacity .3s, background .3s;
   transition: transform .3s, opacity .3s, background .3s, -webkit-transform .3s;
   -webkit-transform: translateY(-2em);
           transform: translateY(-2em);
}
.scrollToTop.visible {
   pointer-events: all;opacity: 1;
   -webkit-transform: translateY(0);
           transform: translateY(0);
}
/*}} Fin del core {{*/

/*! Personalización */
/* Icono
-----------------------------------------*/
.scrollToTop svg {
   fill: #FFFFFF; /* color */
}
/* Boton
-----------------------------------------*/
.scrollToTop {
    background-color: #252525; /* fondo */
    box-shadow: 0 1px 4px rgba(0,0,0,.5); /* sombra */
    bottom: 1em; /* separación inferior */
    right: 1em; /* separación derecha */
    padding: .5em; /* relleno */
    border-radius: 4px; /* borde redondeado */
}
.scrollToTop:hover {
    background-color: #020202; /* fondo (hover) */
}

No olvides guardar los cambios presionando el botón "Aplicar". Ahora vamos a Temas Editar HTML, buscamos </body> y arriba de eso pegaremos el siguiente código:


<!-- ScrollToTop -->
<button id="scrollToTop" data-upspeed='1000' data-upshow='600' 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>
<script src='//cdn.jsdelivr.net/gh/zkreations/plugins@1.0.8/dist/js/scrollup.min.js'></script>

Guarda los cambios y ya tenemos instalado el botón "ir arriba" sin jquery en nuestro blog.


Opciones

De momento solo he incluido 2 opciones, que por defecto se establecen en 600 y 1000 si no se especifican en el código HTML. En la siguiente tabla se explican estos valores:


Opción Tipo Descripcion
data-upshow number Desplazamiento del scroll antes de mostrar el botón
data-upspeed number Velocidad de desplazamiento (1000 = 1 segundo)

Espero que este aporte les sea de utilidad. Si fue asi no olvides compartir este articulo en tus redes sociales, es algo que siempre valoro mucho.