Wednesday, 2 July 2014

jQuery “Back To Top” link with fading

---------------------- <HTML> ----------------------
<div id='BackToTop'>   To The Top!  </div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>




----------------------<JavaScript>---------------------

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('
#BackToTop').fadeIn();
    } else {
        $('
#BackToTop').fadeOut();
    }
});

$("
#BackToTop").click(function () {
   $("html, body").animate({scrollTop: 0}, 1000);
});





--------------- { CSS } ----------------
#BackToTop {
    padding: 5px 3px;
    position: fixed;
    bottom: 0;
    right: 5px;
    display: none;
    border: 5px solid #333;
    background-color: #666;
}

No comments:

Post a Comment

Alternative content