Back to Top Responsive HTML button

print this page button

A Powerful yet Light & Simple Back to Top Responsive HTML button with controls

HTML

<body>
    <a href="#" class="back-to-top">
        <i class="fa fa-chevron-up"></i>
    </a>
</body>

jQuery

$( document ).ready(function() {
    // back to top
    var amountScrolled = 300;

    $(window).scroll(function() {
        if ($(window).scrollTop() > amountScrolled) {
            $('a.back-to-top').fadeIn('slow');
        }
        else {
            $('a.back-to-top').fadeOut('slow');
        }
    });

    $('a.back-to-top').click(function() {
        $('body, html').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});

CSS

a.back-to-top {
    display: none;
    text-align: center;
    line-height: 50px;
    width: 50px;
    height: 50px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background-color: #1ab394;
    color: #fff;
    border-radius: 3px;
}
a.back-to-top:hover {
    color: #fff;
}