トップに戻るボタンをjQueryでニュルッと改造する

これまで設置してた「トップに戻る」ボタンの難点

ブログやサイトなどで、ページの右下だったり左下だったりに「トップに戻る」「PAGE TOP」などといったボタンが設置されているのをよく見かけますよね。

当ブログでも開設当初から設置してました。

▲ 当ブログに以前設置してた「ページ先頭へ」ボタン。クリックするとページの先頭に移動する機能です。ボタン位置はCSSで固定させているのでスクロールしても一定の場所から動きません。

これはこれで最初は満足してました。しかし途中で「あること」に気付いた、というか再認識しました。

たとえば当ブログのトップページを表示した時、

▲ PCブラウザの「Chrome」で見ると、当ブログのドメイン「rikumalog.com」が表示されます。これは正常な状態。

▲ IE9だとフルパスの「https://rikumalog.com/」と表示されてます。

で、ここからが問題点なのですが、旧バージョンの「ページ先頭へ」ボタンをクリックすると、ページ先頭に戻った後に、

▲ URLのお尻に「#header」という文字が追加されてしまいます。

これはHTMLの仕様で、ボタンをクリックすると「id=”header”」と書かれてる位置に移動しろ、という命令を処理。最新の表示位置（＝つまりheaderの位置）をURLが表示するので、HTML的にはこれで正解なんです。

しかしこの問題点は、たとえばブログを読んで下さった人がページをブックマークしてくれる際、もしも「トップに戻る」をクリックした後にブックマークすると？

「#header」がお尻に付いた状態でブックマークされてしまいます。

ってことは、そのブックマークで再び読みに来てくれると、先頭からではなく「header」の位置から毎回表示されちゃう、ということになります。これて運営者である私も、せっかくブックマークしてくださった読者さんも、双方とも不便だし嬉しくない。

URLを変更せずトップに戻る機能が欲しかった

ネットサーフィンしていると「トップへ戻る」ボタンをクリックして移動した後にURLが変化しない（＝つまりお尻に何も文字が加えられてない）ブログが幾つかありました。

さらには、ある程度の位置までページをスクロールするとボタンがフワーっとフェードインして出現するブログもあったり。

どうやればこんな機能が作れるんだろう、と調べてみたら作り方が分かったので作ってみました。

まずボタンのデザインを変更してみました

せっかくなので、ボタンのデザインも少しだけ変更してみることにしました。

<div class="tothetopfixed">
<a href="#header">▲ページ先頭へ▲</a>
</div>	<!--- end [tothetopfixed] -->

▲ HTMLは以前と変更なし。

div.tothetopfixed {
	position: fixed;
	right: 15px;
	bottom: 20px;
	z-index: 1500;
}	

div.tothetopfixed a {
	display: block;
	color: #333333;
	padding: 10px;
	margin: 0;
	background-color: #89c997;
	border-radius: 5px;
	font-size: 0.8em;
}

div.tothetopfixed a:hover {
	background: #0044CC;
	color: #ffffff;
}

▲ CSSは上の通り若干変更。

▲ ボタンのデザインは上のようになりました。これをjQueryでさらに改造していきます。

jQuery(function() {
	var topBtn = jQuery('.tothetopfixed');	
	//最初はボタンを隠す
	topBtn.hide();
	//スクロールが100に達したらボタンを表示させる
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップに戻る
	//500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
		jQuery('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});

WordPressは先頭に「$」を付けると動作しないので、「jQuery」という文字列に全て置き換えています。

	var topBtn = jQuery('.tothetopfixed');	

▲ 2行目では、自分がHTMLで指定した「ボタンのクラスやID」を指定。

		if (jQuery(this).scrollTop() > 100) {

▲ ページの先頭から下へとスクロールしてどの辺りでボタンを出現させるか（＝フェードイン）を数値で指定します。上の例では「100」としてますが、この数字を大きくすればするほど出現位置はページの下側になります。

		}, 500);

▲ 500という数値はボタンをクリックした時にトップへと戻るスクロールのスピード。数値を大きくするとスクロールのスピードが遅くなり、数値を小さくすると速くなります。

これでボタンクリック後もURLに余計な文字は追加されなくなり、スクロールのスピードもシュルシュルッという感じになりました。以前のは「パッ！」と瞬間移動する感じだったので、スクロールする今回の方が個人的には気に入りました。

応用編：フェードインではなく「下からピョコッと顔を出す」ボタン

「ある位置までスクロールするとボタンがフワッとフェードインして出現する」機能を少し変更して、フェードインではなく「ページの下からピョコッと出現する」という機能も作ってみました。

HTMLとCSSは変えず、jQueryだけを変更します。

jQuery(function() {
	var showFlug = false;
	var topBtn = jQuery('.tothetopfixed');
	//最初はボタン位置をページ外にする
	topBtn.css('bottom', '-100px');
	var showFlug = false;
	//スクロールが100に達したらボタン表示
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > 100) {
			if (showFlug == false) {
				showFlug = true;
				topBtn.stop().animate({'bottom' : '20px'}, 200); 
			}
		} else {
			if (showFlug) {
				showFlug = false;
				topBtn.stop().animate({'bottom' : '-100px'}, 200); 
			}
		}
	});
	//スクロールしてトップに戻る
	//500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
		jQuery('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});

▲ 変更箇所をマーキングしています。

	var showFlug = false;

▲ ボタンの表示／非表示を判定する処理のオマジナイみたいなもんだと思って下さい。

	topBtn.css('bottom', '-100px');

▲ ボタンの初期位置をページの外側に設定。最初のページ表示時はボタンが「見えてない状態」にしています。

		if (jQuery(this).scrollTop() > 100) {

▲ 「100」はフェードインの時と同じく「ボタンが出現する位置」の指定。数値を大きくすると出現位置がページの下にズレます。

				topBtn.stop().animate({'bottom' : '20px'}, 200); 

▲ ボタンを下からピョコッと登場させる指定。「20px」は画面下からの距離。「200」は登場する際のスピード。数値を大きくすると出現スピードが遅くなります。

				topBtn.stop().animate({'bottom' : '-100px'}, 200); 

▲ 「ある場所より上にスクロールしたとき、ボタンを画面下に消す処理」の指定。「-100px」は5行目で指定した値と合わせてます。「200」は12行目と同じでボタンの移動スピード。

これで完成です。初心者の私でもこんな機能を実装できちゃうからjQueryってスゴイ。