"Ir al Cielo" Dinamico con JQuery

Ya se que habia hecho un tema con lo mismo en DPW pero esta vez retomo con "estilo" (css) , es decir como aconstumbramos ver un blog un boton , imagen o texto que nos lleva a la parte de arriba de la web pero si bajamos considerablemente, en el tema anterior lo habia hecho este div en la parte mas baja de la web como lo hace taringa.




Diseño y CSS

Se declara el div #back-top con position fixed, para que permanezca estatico mientras se baje a traves de la pagina. El tag span es opcional. Yo puse el span para poner la imagen de una flecha simbolizando la subida al tope de la web. Tambien añadi transitions : transition:1s (1s = 1 segundo) para crear un efecto Fade al evento MouseOver.

Veamos el . Claro sin Jquery




#back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
}

#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}

/* icono de la flecha(span tag) */
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(up-arrow.png) no-repeat center center;

    /* esquinas redondeadas */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}




Les paso la imagen de el up-arrow.png para que la tengan a mano, es tecnicamente transparente por su color blanco asi que


JQuery

Debajo esta el codigo del JQuery que puedes pegar en cualquier parte de tu pagina respetando tags javascript, basicamente esconde el div #back-top , revisa si la posicion del scrollbar respecto a la ventana es mayor a 100 (), entonces aparece con un efecto Fade, si no se cumple la condicion se esconde con efecto FadeOut. Otro ajuste es el evento click, que al darle click al #back-top vuelve el ScrollTop a posicion 0.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

    // por defecto #back-top permanecera oculto
    $("#back-top").hide();
    
    // aparece #back-top si la posicion es mayor a 100
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // vuelve a posicion 0 en la web
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>



Nota:
Se puede observar que esta el link local #top al principio de la pagina pero no es necesario. Tecnicamente el JQuery se encarga subiendo o bajando a cualquier posicion de la web. Pero es bueno incluirlo de reserva por si el navegador no soporta JavaScript.