feh1ks
5/14/2016 - 6:06 PM

Go Top

Go Top

##Go top jQuery

###1. Usage

1.1 HTML
<a href="#" class="go-top">Go Top</a>

#####1.2 CSS

.go-top {
    position: fixed;
    display: none;
    bottom: 2em;
    right: 2em;
    background-color: rgba(0, 0, 0, .3);
}

.go-top:hover {
    background-color: rgba(0, 0, 0, .6);
}

#####1.3 JS

$(document).ready(function() {
    // Show or hide the sticky footer button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('.go-top').fadeIn(200);
        } else {
            $('.go-top').fadeOut(200);
        }
    });
    
    // Animate the scroll to top
    $('.go-top').click(function(event) {
        event.preventDefault();
        
        $('html, body').animate({scrollTop: 0}, 300);
    })
});