JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<main></main>

	<footer>
        <div id="pagetop-wrap">
            <div class="pagetop">
                <a href="#"><i class="fa fa-chevron-up"></i></a>
            </div>
        </div>
	</footer>

</div>

CSS

html, body {
	width: 100%;
	height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#container {
	min-height: 100%;
	position: relative;
	height: auto !important;
	height: 100%;
}

main {
	width: 100%;
  height: 800px;
	padding-bottom: 48px;
}

/*---- フッター ----*/
	
footer {
	width: 100%;
	height: 48px;
	background-color: grey;
	position: absolute;
	bottom: 0;
}

/*---- ページトップボタン ----*/

#pagetop-wrap {
	position: relative;
}

.pagetop {
	position: fixed;
  bottom: 20px;
	right: 20px;
}

.pagetop > a {
  width: 100px;
  height: 100px;
  background-color: #ffdd3f;
	border-radius: 50px;
	display: block;
	transition: all 0.6s ease-in-out 0s;
}

JavaScript

$(function(){
	
	var maxScroll = $(document).height() - $(window).height() - $('footer').height();
	var showFlag = false;
	var topBtn = $('.pagetop');
	topBtn.css('bottom', '-100px');
	
  // スクロールしたらボタン表示
	$(window).on('touchmove scroll', function() {
			if ($(this).scrollTop() > 0 && $(this).scrollTop() < maxScroll) {
				if (showFlag == false) {
            showFlag = true;
						topBtn.stop().animate({
              'bottom': '20px'
              }, 300);
				}
			} else {
				if (showFlag) {
					showFlag = false;
					topBtn.stop().animate({
						'bottom': '-100px'
						}, 300);
				}
			}
	});
});