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;
});
});