スクロールに追従する「トップへ戻るボタン」を作成する方法
こんにちは、koheiです。
今日は、久しぶりにjQueryネタです。
最近のWebサイトでよく見るスクロールに追従する「トップへ戻る」ボタンの作成方法をご紹介します。
「トップへ戻る」ボタンの配置
まずは、htmlファイルもしくは、phpファイルに「トップへ戻る」ボタンを配置しましょう。
私はWordPressを使用しているので、footer.phpに記載しました。
【footer.php】
|
1 2 3 |
<div class="page-top"> <img src="<?php echo get_template_directory_uri();?>/images/page_top.gif" alt="ページトップボタン"> </div> |
ボタン全体をclass名“page-top”というdiv要素で囲みます。
ボタンは、page_top.gifという画像を配置してます。（別に文字列でも構いません。）
ボタンのCSS設定
次にCSSを以下のように設定します。
【style.css】
|
1 2 3 4 5 6 7 |
/* ページトップボタン */ .page-top { position: fixed; right: 10px; bottom: 10px; z-index: 99; } |
ポイントは、position:fixedを指定することです。
これで、ページがスクロールされても同じ場所に配置されます。
位置は、right,bottomなどで、ちょうどよい場所に配置してください。
z-indexは重なり順です。最前面に表示させるため、99を指定しています。
jQueryの実装
jQueryは以下のように実装します。
【my_script.js】
※WordPressのjQueryスクリプトでは、他のパッケージとの競合を防ぐ為、$マークをjQueryに書き換えています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
jQuery(function(){ /* TOP-Pageボタン制御 */ var topBtn = jQuery('.page-top'); topBtn.hide(); //スクロールが100に達したらボタン表示 jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); } |
５行目でまずは、TOPへ戻るボタンを非表示にしています。
7行目〜13行目は、スクロール量が100に到達したら、ボタンを表示させ、スクロール量が100より小さい場合は、非表示にしています。
15行目以降は、トップへ戻るボタンをクリックした時に、トップ位置まで移動させる処理です。
トップへ戻すスピードは、１８行目の数値で調整します。（上記は、500msecを指定しています）
最後に
いかがでしょう？
縦長のサイトなどは、トップへ戻るボタンが追従してくれるととても便利ですよね。
ぜひ活用してみてください！！
それでは！
スポンサーリンク
