JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p id="text">テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p>

<p><a href="#" id="pagetop">ページトップへ</a></p>

CSS

#text {
    color: red;
}
#pagetop {
    display: block;
    padding: .5em;
    position: fixed;
    right: 0;
    bottom: 20px;
    background-color: pink;
}

JavaScript

$('#pagetop').hide();
$('#pagetop').on('click', function(e) {
    $('html,body').animate({'scrollTop': 0},1000,'easeOutBounce');
    e.preventDefault();
});
$(window).on('scroll', function() {
    if(  $('body').scrollTop() > 100 ) {
        $('#pagetop').fadeIn();
    } else {
        $('#pagetop').fadeOut();
    }
});