201401/25土曜日

【jQuery】フッターの位置で固定するページトップへ戻る

業務でページトップへ戻るリンクを実装するときに色々と苦労したので備忘録としてメモしておきます。

今回作成したページ

今回作成したページはこのようなページです。

このような動きをしています。

ページをスクロールするとページトップへ戻るリンクがフェードイン・アウトする。
ページトップへ戻るリンクをクリックするとスムーズにスクロールする。
ページトップへ戻るリンクはコンテンツ部分の右下で固定表示される。
フッターのところまでスクロールするとページトップへ戻るリンクがフッターに貼り付く。

動作がややこしいですね…。私のようにjQueryが苦手な方のために1つずつ解説していきます。

1.jQuery本体を読み込む

jQueryを使用するには以下のファイルを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

今回はGoogleの共有サーバーに置かれているファイルを読み込みましたが、jQueryのサイトからjQuery本体をダウンロードし、ローカルに保存して使用する方法もあります。

1.ページスクロールに応じて要素をフェードイン・アウトさせる

スクロールに応じて要素をフェードイン・アウトさせるには以下のコードを挿入します。

// page Topフェードイン・アウト
$(function(){
	$(window).bind("scroll", function() {
	// トップから150px以上スクロールしたら
	if ($(this).scrollTop() > 150) { 
	 // ページトップのリンクをフェードインする
		$(".pageTop").fadeIn();
	} else { // それ以外は
	 // ページトップのリンクをフェードアウトする
		$(".pageTop").fadeOut();
	}
});

「150px以上」という値はお好きに変更してください。フェードイン・アウト以外にも、「fadeIn()」を「show()」に、「fadeOut()」を「hide()」にすることで、フェードアニメーション無しでパッと出すこともできます。

ページトップへ戻るリンクをクリックするとスムーズにスクロールする。

ページ内リンクのスムーズスクロールはこのように実装します。よく使うのにいつもググっていたのでメモしておきます。

// スムーズスクロール
$(function(){
	// ページ内リンクをクリックすると
	$('a[href^=#]').click(function(){
 		// スクロールスピード
 		var speed = 500;
 		// クリックしたリンク先を保存
		var href= $(this).attr("href");
		// クリックしたリンク先が#または空のときは
		var target = $(href == "#" || href == "" ? 'html' : href);
		// トップへ移動する
		var position = target.offset().top;
		// リンク先へスムーズに移動する
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

クロードやアニメーションを変更するとまた違って見えます。アニメーションについては割愛します。

ページトップへ戻るリンクはコンテンツ部分の右下で固定表示される。

ページトップへ戻るリンクの固定はCSSで行います。要素の固定は「position:fixed;」で行いますが、絶対配置の「position:absolute;」とは違い、親要素に「position:relative;」を指定して基準点を変更することができません。そのため、ブラウザの左上を基準として配置されてしまいます。

これを解決するためには、下記参考サイトに書かれている方法を参考にします。

position:fixedで、左端を親要素基準にする | Just Another Life

<header>
<h1>【jQuery】フッターの位置で固定するページトップへ戻る</h1>
</header>
<div id="contents">↓下にスクロール↓</div>
<p class="pageTop"><a href="#"></a></p>
<footer>フッター</footer>

/* ページトップへ戻る */
.pageTop {
	position:relative;
	width:90%;
	max-width:900px;
	height:0;
	margin:0 auto;
}
.pageTop a {
	position: fixed;
	bottom: 0px;
	left:auto;
	display: block;
	width: 66px;
	hegiht:66px;
	margin-left:920px;
	/* ↓以下はリンク装飾↓ */
	padding:1em 0
	background:#3498db;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:3px 3px 0 0;
}

ポイントになるのが、リンクを「left」で指定するのではなく「margin-left」で指定するところです。基準点を変更できないならマージンで左から右にコンテンツの幅だけ押し出せばいいじゃない！という強引さがありますが、これで理想としていた配置にすることが出来ました。

しかし、このままだとタブレットやスマートフォンで見た時にページトップへ戻るリンクが画面からはみ出してしまうので、レスポンシブに対応させるCSSを記述します。

/* =====================
	タブレット向け
======================= */
@media screen and (min-width: 480px) and (max-width: 959px) {

.pageTop {
	width:100%;
}
.pageTop a {
	left:-68px;
	margin-left:100%;
}

/* タブレット向けここまで */ }

/* =====================
	スマホ向け
======================= */
@media screen and (max-width: 479px) {

.pageTop {
	width:100%;
}
.pageTop a {
	left:-68px;
	margin-left:100%;
}

/* スマホ向けここまで */ }

フッターのところまでスクロールするとページトップへ戻るリンクがフッターに固定される。

フッターのところに来たらページトップへ戻るリンクが固定させるにはjQueryで行います。
以下の参考サイトのコードを使用しております。

jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール | memocarilog

// page Topフェードイン・アウト
$(function(){
	$(window).bind("scroll", function() {
	// ドキュメントの高さ
	scrollHeight = $(document).height();
	// ウィンドウの高さ+スクロールした高さ→ 現在のトップからの位置
	scrollPosition = $(window).height() + $(window).scrollTop();
	// フッターの高さ
	footHeight = $("footer").height();
	
	// スクロール位置がフッターまで来たら
	if ( scrollHeight - scrollPosition  <= footHeight ) {
		// ページトップリンクをフッターに固定
		$(".pageTop a").css({"position":"absolute","bottom": "0px"});
	} else {
		// ページトップリンクを右下に固定
		$(".pageTop a").css({"position":"fixed","bottom": "0px"});
		}
	});
});

フッターが見えたらページトップへ戻るリンクを「position:absolute;」に変更し、「bottom:0;」つまりフッターの上に固定表示させます。
フッターが見えなくなるまでスクロールさせると「position:fixed;」に戻し、ブラウザの下に固定されます。

これでフッターの位置で固定するページトップへ戻るリンクが完成です！