JSFiddle - React, Tailwind, and code Playground

by kazumasa sait

HTML

<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><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> <a href="#" id="pagetop" >ページトップへ</a></p>

CSS

#text{
    color: #red;
    }

#pagetop {
    display: block;
    position: fixed;
    right : 0;
    bottom : 20px;
    background-color: #pink;
        
    
    }

JavaScript

$('#pageTop').hide();

$('#pagetop').on,('click',function(e){
    $('html,body').animate(['scrollTop’:0],1000);  
    e.preventDefault();    
    
    //$('html').animate([アニメーションさせる対象],何秒,イージング);
});
                            
                            $(window).on('scroll',function(){
                            if( $('html,body').scrollTop >100) {
                            $('#pagetop'.fadeIn();
                            } else {
                            $('#pagetop').fadeout()}
                            
                            
                            }                       
                            
                            
                            }