Clicky

Botón flotante dinámico "Volver arriba" con desplazamiento suave

flechas volver arriba

Usamos jQuery para hacer visible la animación del botón cuando se desplace abajo el usuario

¿Alguna vez has leído un blog o un artículo muy largo y luego has tenido que desplazarte todo el camino de vuelta hasta la parte superior de la pantalla para acceder al menú? Puede ser un poco frustrante. Es fácil de solucionar, puedes poner un menú fijo o como se verá aquí se puede proporcionar una manera rápida y elegante para volver arriba.

ver demo volver arriba

Introducción

Con el HTML todo lo que necesitamos hacer es poner un "volver arriba" en la parte inferior de la entrada del blog:

<a href="#" class="back-to-top">Volver arriba</a>

Volver arriba - HTML

Entonces necesitamos estilo y posición. Aquí estoy fijando una posición de fija y lo muevo a la parte inferior derecha de la pantalla. También le he dado un fondo semi-transparente y finalmente oculto. Para hacer que se destaque un poco más también le he dado un efecto de activación para oscurecer un poco el fondo (background).

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
    display: none;
}

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
}

Volver arriba - posición

El jQuery

En primer lugar tenemos que añadir jQuery a nuestra página. Se puede hacer esto mediante la adición de una etiqueta de script como esta:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

O, si estás usando WordPress añade algo como esto: add_action y wp_enqueue_script

function theme_enqueue_script(){ 
    wp_enqueue_script('jquery');  
}
add_action('wp_enqueue_scripts', 'theme_enqueue_script');

La función real de jQuery es bastante simple, primero ponemos nuestro desplazamiento (después de la cantidad de desplazamiento de la parte superior que queremos que aparezca el botón) y el tiempo que queremos que el desplazamiento afecte al último superior. Nosotros no queremos que sea demasiado rápido, pero si es muy lento será molesto. He puesto aquí a la mitad de un segundo.

Entonces necesitamos hacer nuestro botón visible cuando el usuario se desplace. Para ello se utiliza la función jQuery scroll. En esta función nos agarra la posición de desplazamiento actual utilizando scrollTop, comprobamos si es mayor que nuestro offset y si lo es se muestra el botón con la función fadeIn. Si no es así nos aseguramos de que el botón no es visible mediante la función fadeOut.

Para desplazarse en realidad a la parte superior, tenemos que interceptar el evento de clic en nuestro botón. En primer lugar, prevenir que se dispare el clic default, y después nos desplazamos de nuevo a la parte superior utilizando la función animate, pasando nuestro duración. Finalmente devolvemos false para garantizar que no hay otros eventos que se produzcan después de esto.

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
    
    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});

Y aquí está, una manera rápida, simple pero eficaz de volver a la parte superior de la página [clic en el enlace para ver la demo].

Jesus_Caceres