Go Top

by MiguelR

HTML

<div id="To-Top"> <img src="https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/go-bottom-24.png" alt="Volver Arriba" /></div>
<div id="cont"></div>

CSS

#cont{
    width: 500px;
    height: 1500px;
}
#To-Top { 
top: 0px;
position: fixed;
width: 30px; height: 28px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.rotado{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
}

JavaScript

// hide #back-top first
jQuery("#To-Top").hide();

// fade in #back-top
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 400) {
            jQuery('#To-Top').fadeIn();
        } else {
            jQuery('#To-Top').fadeOut();
        }
    });

    // scroll body to 0px on click
    jQuery('#To-Top img').click(function () {
        jQuery('body,html').animate({scrollTop: 0}, 800);
    });

        jQuery("#To-Top").hover(function () {
            jQuery(this).addClass("rotado");
        }, function () {
            jQuery(this).removeClass("rotado");
        });