jQuery Scroll Back To Top Button Arrow

jquery-scroll-top-button.md

jQuery Scroll Back To Top Button Arrow

html:

<div id="alio_to_top"><a href="#"></a></div>

css:

#alio_to_top a {
    display: none;
    z-index: 999;
    position: fixed;
    bottom: 5px;
    right: 3%;
    width: 73px;
    opacity: 0;
    transition: opacity .5s;
    height: 123px;
    background: url("#{$img-path}/rocket-arrow.png") no-repeat;
    background-size: contain;

    &.active {
        display: block;
        animation: slideInUp 0.7s;
        opacity: .8;
    }

    &:hover {
        opacity: 1;
    }
}

scripts.js:

// Scroll to Top Button
$(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
        $('#alio_to_top a').css('display', 'block').addClass('active');
    } else {
        $('#alio_to_top a').fadeOut("slow", function() {
            $(this).removeClass("active");
        });
    }
});

$('#alio_to_top a').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 500);
    return false;
});