ScrollTop Button with jQuery

scrolltop-button.html

<!-- scrolltop begin -->
<div class="scrolltop-placeholder">
    <div class="scrolltop scrolltop_hidden js-scrolltop">
        <span class="scrolltop__caret"></span>
        <span class="scrolltop__text">Top</span>
    </div>
</div>
<!-- scrolltop end -->

scrolltop-button.js

/**
 * ScrollTop Button
 */
$(function () {
    var $body = $('body, html');
    var $scrolltop = $('.js-scrolltop');
    $scrolltop.on('click', function () {
        $body.animate({
            scrollTop: 0,
        }, 500);
    });
    var $window = $(window);
    $window.on('scroll', function () {
        if ($window.scrollTop() > 250) {
            $scrolltop.removeClass('scrolltop_hidden');
        } else {
            $scrolltop.addClass('scrolltop_hidden');
        }
    });
}());

scrolltop-button.styl

.scrolltop
    text-align center
    cursor pointer
    position absolute
    top 0
    right 530px
    padding 15px
    color #106cb6
    transition opacity 0.25s ease 0s

    &_hidden
        opacity 0

    &-placeholder
        position fixed
        top 50%
        left 50%

    &__text
        text-decoration underline
        display block

    &__caret
        size = 5px
        border-left size solid transparent
        border-right size solid transparent
        border-bottom size solid
        display inline-block
        height 0
        margin 0 auto 5px
        vertical-align middle
        width 0