Botón para Ir Arriba de la página con jQuery

Hoy en día es normal encontrar en las páginas web un pequeño botón en la parte inferior de todo, que al darle click permite ir hacia arriba de la página de una manera rápida. A esto lo conocemos como botón ir arriba, subir, o volver arriba.

Este famoso botón es de gran ayuda para los usuarios de tu blog, especialmente cuando el contenido de un articulo es extenso ya que le ahorrará tiempo al usuario al no tener que hacer scroll manualmente para ir la parte superior de tu blog.

En esta ocasión vamos a implementar este botón Ir Arriba con ayuda de jQuery para que sea visible solo cuando el usuario haya hecho scroll hacia abajo y desaparezca una vez éste arriba. Y para finalizar haremos que esta transición del botón Subir tenga un desplazamiento suave.

Instalar botón Ir Arriba en Blogger

Desde nuestro panel de administración de Blogger vamos a Tema > Personalizar > Avanzando > Añadir CSS , y agregamos el siguiente código:

 a.scroll-top {
    display: none;
    position: fixed;
    z-index: 1000;
    bottom: 1em; /** Sepración inferior **/
    right: 1em; /** Separación derecha **/
    padding: .3em; /** Relleno **/
    background: #242424; /** Colo de fondo **/
    box-shadow: rgba(0, 0, 0, .5) 0 1px 2px, rgba(0, 0, 0, .25) 0 1px 7px; /** Sombra **/
    border-radius: 5px; /** Borde redondeado **/
}
 a.scroll-top svg {
    display: block;
    fill: #fff; /** Color del icono **/
}

Luego de los estilos agregaremos el botón y un pequeño script para hacer funcionar todo. Nos dirigimos a Tema > Editar HTML y agregamos el siguiente código arriba de la etiqueta </body>:

<a href='#' class='scroll-top'>
    <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'/>
    </svg>
</a>

<script>
    //<![CDATA[
    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) {
            $('a.scroll-top').fadeIn('slow');
        } else {
            $('a.scroll-top').fadeOut('slow');
        }
    });
    $('a.scroll-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 600);
    });//]]>
</script> 

Configurar botón

Vamos a explicar un poco el código anterior, específicamente el segundo bloque, para que puedan entender como funciona todo.

Con el objeto window y el método scroll de jQuery verificamos la posición actual del scroll para mostrar u ocultar el botón según sea el caso. En específico se mostrará el botón si el usuario ha desplazado 300px hacia abajo la página y se ocultará en caso contrario.