JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<a href="#" id="pagetop">ページトップへ</a><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><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><p>なんぞ</p><p>なんぞ</p><p>なんぞ</p>

<p id="display">px</p>

<p id="">yes!</p>

CSS

*{margin: 0;padding: 0;list-style: none;}
#display {
    position: fixed;
    top: 0;
    left: 0;
    padding: .4em;
    background-color: rgba(255,150,255,.6);
}
#pagetop {
    display: block;
    border: 1px solid red;
}

JavaScript

$(function() {
    
    $('body').on('click', '#pagetop',function(e) {
        $('html, body').animate({'scrollTop':0},1000,'easeInElastic');
        e.preventDefault();
    });
    
});

$(window).on('scroll', function() {
    $('#display').html( $('html').scrollTop() + 'px');
    if( $('html').scrollTop() > 300 ) {
        
    }
});