デモページはこちら

jQueryでフッターの高さを取得し、ユーザーがページ最下部までスクロールしても、トップへ戻るボタンをフッターよりも上部に表示します。

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

<footer>
	<div class="copyright">Copyright © Brick Plan All Rights Reserved.</div>
</footer>
<p class="toTop"><a href="#page-top">↑</a></p>

以下のCSSを設定します。クラス名toTopのpタグはopacity: 0;を設定し、クラス名is-activeを付与した時のみ表示します。フッターはPCとスマホ表示時で高さを変えます。

.toTop {
	position: fixed;
	right: 1em;
	bottom: 1em;
	pointer-events: none;
	opacity: 0;
	margin: 0;
	transition: opacity 0.5s;
}
.toTop.is-active {
	pointer-events: auto;
	opacity: 1;
}
.toTop a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50Px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-weight: bold;
}
footer {
	background: #000;
	padding: 3em;
}
@media screen and (max-width:768px) { 
	footer {
		padding: 2em;
	}
}
.copyright {
	text-align: center;
	color: #fff;
	font-size: 14px;
}

以下jQueryのコードです。ページのロード、スクロール、リサイズ時の動作になります。トップへ戻るボタンはブラウザの高さの半分よりもスクロール量が大きくなったタイミングで表示・非表示を切り替えます。また、ドキュメントの高さ－（ウインドウの高さ＋スクロール量）がフッターの高さ以下になったらトップへ戻るボタンのCSSを変更します。フッターの高さ＋調整pxの位置に配置して、フッターよりも上部に表示します。調整pxはPCとスマホ表示時で変更しています。なお、フッターの高さはpaddingも含めて取得するためinnerHeight();を使用します。

$(window).on('load scroll resize', function() {
	if($('.toTop')[0]) {
		var h = $(window).height(); //ブラウザの高さ
		var w = $(window).width(); //ブラウザの幅
		var scrollTop = $(window).scrollTop(); //実際のスクロール量

		if(scrollTop > h / 2) {
			$('.toTop').addClass('is-active');
		} else {
			$('.toTop').removeClass('is-active');
		}

		if(w < 768) {
			btm = 10;
		} else {
			btm = 20;
		}

		docsHeight = $(document).height(); //ドキュメント全体の高さ 
		scrollPosition = h + scrollTop; //ウインドウの高さ + スクロール量
		footHeight = $('footer').innerHeight(); //フッターの高さ（＝止めたい位置）

		//ドキュメントの高さ－(ウインドウの高さ＋スクロール量)がフッターの高さ以下になったら
		if(docsHeight - scrollPosition <= footHeight) {
			$('.toTop').css({
				'position': 'absolute',
				'bottom': footHeight + btm //bottomをフッターの高さ＋調整pxに指定
			});
		} else {
			$('.toTop').css({
				'position': 'fixed',
				'bottom' : '1em'
			});
		}
	}
});