JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<a href="#" id="btn-pagetop" class="btn-pagetop">ページトップへ戻る</a>

CSS

html{
  position: relative;
  width: 100%;
  height: 800px;
}

.btn-pagetop{
  display: block;
  position: absolute;
  bottom:64px;
  right:64px;
  width: 44px;
  height: 44px;
  background:#f00;
  text-indent: 100%;
  white-space:nowrap;
  overflow:hidden;
}

.btn-pagetop::before{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
  content:"";
  width: 4px;
  height: 4px;
  border-top:solid 2px #fff;
  border-right:solid 2px #fff;
}

JavaScript

$('.btn-pagetop').on('click', function(){

	$('html, body').animate({scrollTop:0},1000);

});