JSFiddle - React, Tailwind, and code Playground

HTML

<article>

<section id="maincontent"></section>

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

</article>

CSS

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

body {
  margin: 0;
  padding: 0;
}

body article {
	min-height: 100%;
	position: relative;
	height: auto !important;
	height: 100%;
}

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

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

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

#pagetop-wrap {
	position: relative;
}

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

.pagetop > a {
  width: 100px;
	height: 100px;
	font-size: 20px;
	line-height: 102px;
	background-color: #ffdd3f;
	color: white;
	text-align: center;
	border-radius: 50px;
	display: block;
	transition: all 0.6s ease-in-out 0s;
}

JavaScript

$(function(){

	var topBtn = $('.pagetop');
	
	// ページトップボタンを非表示にする
    topBtn.hide();
 
	$(window).scroll(function() {

		if ($(this).scrollTop() > 0) {
			topBtn.slideDown();
		} else {
			topBtn.slideUp();
		}
		
		// フッターに到達したら非表示
			
		// ドキュメントの高さ
		scrollHeight = $(document).height(); 
		
		//　ウィンドウの高さ+スクロールした高さ→　現在のトップからの位置
		scrollPosition = $(window).height() + $(window).scrollTop(); 
		
		// フッターの高さ
		footHeight = $("footer").innerHeight();
	
		// 現在の下から位置が、フッターの高さの位置にはいったら
		if ( scrollHeight - scrollPosition  <= footHeight ) {
		
		//  ".pagetop"のpositionをabsoluteに変更し、フッターの高さの位置にする        
      topBtn.css({
        "position": "absolute", //フッターの
      });
      topBtn.slideUp();

    } else {
      topBtn.css({
        "position": "fixed",
      });
      topBtn.slideDown();
    }
			
	});
    
    // トップへスムーススクロール
    $('.pagetop a').click(function () {
        $('body,html').animate({
        scrollTop: 0
        }, 'slow');
        return false;
    });
 
});