下へスクロールした時に「TOPへ」ボタンを表示させるjQuery

更新日：2017年1月3日

新年明けましておめでとうございます。更新頻度に相変わらず波がありますが、時間を見つけ次第随時記事を投稿していきますよ。
2017年もWEB担当者の作り方を何卒宜しくお願い申し上げます。定期的に覗いて頂ければとっても管理人は嬉しいです。
さーて、全国のWEB担当者の皆さん、新年1発目の記事を投稿しますよ！

サイトのコンテンツ量（文字量）が多いと、どうしてもそれに比例してページは縦に長くなってしまいますよね。
そうすると、当サイトのようにページ上に主要メニューがある場合、わざわざ上までスクロールしないと他のページを見られません。それでは閲覧しているユーザーには不親切ですよね。それが原因でユーザーが離脱してしますケースは多いです。

解決策としては、以前紹介したスクロールしてもページ上部にメニューを固定するjQueryを実施するか、今回紹介する下へスクロールした時に「TOPへ」ボタンを表示させる方法がベターだと思われます。

下へスクロールした時に「TOPへ」ボタンを表示させるってどういうこと？って思う方はまずはいつもの如く完成デモをご覧下さい。このページに実装していますので。
このページを下までスクロールしていくと「TOPへ」と書かれたボタンが何処からともなく表示され、それをクリックするとページの上部まで自動でスクロールしてくれます。

それでは実装方法のご紹介です。HTMLには下記のように記述。

TOPへ

この記述はbody内の何処に記述しても問題ありませんが、一応出来る限り下の方に記述した方が無難です。

次にCSSには下記のように記述。

#tophe {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 14px;
}

#tophe a {
	display: block;
	color: #fff;
	background-color: #000000;
	opacity: 0.7;
	text-decoration: none;
	width: 75px;
	padding: 25px 0;
	text-align: center;
	border-radius: 16px;
}

このCSSを変更することで自分好みのデザインにすることが可能です。画像に置換するのも手段ですね。

最後にjQueryには下記のように記述。

$(function() {
	var topBtn = $('#tophe');
	topBtn.hide();
	$(window).scroll(function () {
		if($(this).scrollTop() > 200) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
	});
});

HTML、CSS、JQueryそれぞれ記述したら完成です。記述するだけで実装可能で、いつも通りプラグインも入れる必要も一切必要ありません。

ユーザーから喜ばれること間違いなしだと思うので、是非実装することをお勧めします。

TOPへ