Simple back to top link

Una de las cosas más utilizadas últimamente es el link de “back to top” que te lleva al comienzo de la página cuando llegaste al final de esta.

No es nada novedoso a estas alturas pero si algo muy útil de implementar y si se le agrega algo de jQuery algo muy vistoso también.

Comenzamos con un poquito de html y css básico.

<div id="back-top">
    <a href="#">Back</a>
</div>

Lo que necesitamos hacer es crear un div con id “back-top” y ocultarlo a travez de css con display none. Ademas le asignamos una posicion fija en nuestra pantalla a 30px de la derecha y 30px del fondo.

#back-top {
    display: none;
    left: 30px;
    bottom: 30px;
    margin: 0;
    position: fixed;
}

Ahora para darle un poco mas de estilo lo que hacemos es obtener la distancia actual del scroll desde el top de la pantalla. Cuando el scroll es mayor a 100px por medio de jquery hacemos que el div “back-top” se haga visible y si es menor a 100px se oculte.

$(window).scroll(function () {
    var scroll = $(this).scrollTop();
    if (scroll > 100) {
        $('#back-top').fadeIn();
    } 
    else {
        $('#back-top').fadeOut();
    }
});

Por último le damos la función de scroll automático al principio de la página cuando el link es clickeado. Este tardara en total 700ms en avanzar hasta el top haciendo un scroll muy suave y vistoso.

$('#back-top a').click(function (e) {
    e.preventDefault();
    $('body,html').animate({
        scrollTop: 0
    }, 700);
});

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *