一定スクロールでフェードインする上に戻るボタン

<div class="scroll_top">
    <div class="scropp_top_inner">
        <a href="#">
            <img src="<?php echo get_template_directory_uri(); ?>/img/common/icon_scroll.png" alt="">
        </a>
    </div>
</div>

    .scroll_top {
        position: fixed;
        right: 40px;
        bottom: 60px;
        z-index: 10;
    }

    .scropp_top_inner {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .scropp_top_inner:hover {
        background: rgba(0, 0, 0, 0.8);
        -webkit-transition: .3s;
        transition: .3s;
    }

    $(function () {
        //.scroll_topを変数[topBtn]に入れる 
        var topBtn = $('.scroll_top');
        //topBtnはhide()にして見えないようにする 
        topBtn.hide();
        $(window).scroll(function () {
            //200pxスクロールしたらtopBtnをフェードイン表示させる 
            if ($(this).scrollTop() > 200) {
                topBtn.fadeIn();
            } else {
                //もし上にスクロールして200px未満になったらフェードアウトさせる 
                topBtn.fadeOut();
            }
        });
        //topBtnをクリックしたらトップへスクロールする 
        topBtn.click(function () {
            $('body,html').animate({ scrollTop: 0 }, 500); return false;
        });
    });