HOME > jQuery > jQueryで「トップへ戻る」ボタンをスクロールに応じてフェードイン・アウトしたい

jQueryで「トップへ戻る」ボタンをスクロールに応じてフェードイン・アウトしたい


これやっときたいなぁ。。。と思ってたがやらずにいた。思い腰を上げてみたヨイショ
こちらのサイトのおかげさまで無事表示できました。ありがとうございます<(_ _)>

[Я]トップに戻るボタンをjQueryでニュルッと改造する｜りくまろぐ

以下の内容を実現。かゆいところにも手が届くような心遣いが嬉しいつくりです。

  • ページをスクロールすることで「トップへ戻る」ボタンをフェードイン・アウト表示
  • 「トップへ戻る」実行後もurlが変わらない（←大事）

まずはお馴染みヘッダにjQueryを読み込み。Googleから読んでます。

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

「トップへ戻る」のhtmlを表記。スタイリングはcssでやっておきます。

<div class="gototop">
<a href="#header">▲ページ先頭へ</a>
</div>	<!--- /.gototop -->

jQuery の実装部分。以下を読み込む。
WordPressのコンフリクト対策として「$」の代わりに「jQuery」に置き換えていますがGoogleから読んでいる場合は「$」でok

jQuery(function() {
	var showFlug = false;
	var topBtn = jQuery('.gototop');
	//最初はボタン位置をページ外にする
	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;
    });
});

似たタイプの記事

トップへ戻る