Smooth scroll to top [jQuery & CSS]

scroll_to_top.js

function scrollToTop() {
    var pxFromTop = 800;

    $('#footer').append('<div id="goTop">Scroll To Top</div>');
    $('#goTop').hide();

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

    $('#goTop').click(function () {
       $('html, body').animate({scrollTop: 0}, 700);
    });
}

scroll_to_top.scss

#goTop {
    background-image: url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-07-128.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    text-indent: -9999px;
    opacity: .7;

    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;

    * {
        transition: all ease-in-out .3s;
    }

    @include media-breakpoint-up(md) {
        display: block;
        height: 40%;
        width: 6%;
        max-width: 80px;

        &:hover {
            background-image: url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-07-128.png'), linear-gradient(to top, white, transparent);
            opacity: 1;
        }
    }
}