デモページはこちら

ユーザーがページ最下部までスクロールしたタイミングで、トップへ戻るボタンをフェードインで表示します。ボタンをクリックまたはページ最下部よりも上部へスクロールでトップへ戻るボタンをフェードアウトさせます。

トップへ戻るボタンのhtmlは以下の通りです。

<p class="toTop"><a href="#page-top">↑</a></p>

以下のCSSを設定します。クラス名toTopのpタグは非表示にします。

.toTop {
	position: fixed;
	right: 1em;
	bottom: 1em;
	display: none;
	margin: 0;
}
.toTop a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50Px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-weight: bold;
}

以下jQueryのコードです。ページスクロール時の動作になります。$(document).innerHeight();でブラウザの枠外に隠れた部分も含めたドキュメント（ページ全体）の高さを取得します。$(window).innerHeight();でブラウザの高さを取得します。ドキュメントの高さからブラウザの高さを引くとページ最下部までのスクロール量になります。これを実際のスクロール量と比較してif文で判定します。
なおページ最下部までのスクロール量はトップへ戻るボタンの高さを差し引いて、if文の条件が成立するように調整しています。

$(function() {
	$(window).on('scroll', function(){
		var totoph = $('.toTop').innerHeight();
		var doch = $(document).innerHeight();
		var winh = $(window).innerHeight();
		var bottom = doch - totoph - winh; //ページ最下部までのスクロール量
		if (bottom <= $(this).scrollTop()) {
			$('.toTop').fadeIn(400);
		} else {
			$('.toTop').fadeOut(400);
		}
	});
});