ページをある程度スクロールすると、右下にボタンが出現して、そのボタンをクリックすると、ぬるっとスクロールしながらページのトップに戻っていく機能を jQuery を使って実装する方法です。
ページの先頭へ移動するボタンの実装に必要なものは
- ボタンの HTML の記述
- ボタンのデザイン、動作などの CSS の記述
- jQuery への参照
- ボタンの表示/非表示とクリックしたときの動作の jQuery の記述
の4つです。
作成するボタンのデザインは、とりあえずこんな感じにしておきます。
では、HTML の記述から順番に見ていきましょう。
ページの先頭へ移動するボタンを HTML で記述する
|
1 |
<p id="to-pagetop"><a>▲ ページの先頭へ</a></p> |
P タグと A タグでボタンの枠組みを作成します。
CSS でのスタイルの設定と、jQuery での操作に必要なので P タグの ID を設定します。ここでは「to-pagetop」としておきます。
A タグの中に表示する文字列を記述します。文字列ではなく画像を使う場合は「▲ ページの先頭へ」の部分を IMG タグに置き換えます。
CSS でボタンのデザインと動作を指定する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* --------------------------------------------------------------------------------- ◆ ページの先頭へ移動するボタンの入れ物 --------------------------------------------------------------------------------- */ #to-pagetop { /* 表示位置の指定 (右下から 20px 固定) */ position: fixed; right: 20px; bottom: 20px; /* 初期は非表示 */ display: none; } /* --------------------------------------------------------------------------------- ◆ 「ページの先頭へ」のリンクボタン --------------------------------------------------------------------------------- */ #to-pagetop a { /* 余白 */ padding: 20px; /* リンクのテキスト装飾なし */ text-decoration: none; /* 文字は太字 */ font-weight: bold; /* マウスカーソルをポインター (指) にする */ cursor: pointer; /* ブロック表示 */ display: block; /* 背景色と前景色 */ background-color: #004a7f; color: #fff; /* 角を丸めるスタイル */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* マウスカーソルを合わせた時 (ホバー時) のアニメーション */ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* --------------------------------------------------------------------------------- ◆ 「ページの先頭へ」のリンクボタンにマウスカーソルを合わせた時 (ホバー時) --------------------------------------------------------------------------------- */ #to-pagetop a:hover { /* 背景色と前景色 */ background-color: #adddff; color: #003459; } |
30～37行目の装飾は必要に応じて変更してください。不要であれば削除してしまっても問題ありません。
jQuery への参照を追加する
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
body の終了タグの前あたりに jQuery への参照を書いておきます。バージョン (本サンプルでは「1.9.1」) は環境に合わせて適宜変更します。
jQuery のコードを記述する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function(){ /* --------------------------------------------------------------------------------- ◆ スクロールしたときにページの先頭へ移動するボタンを出現させるイベント --------------------------------------------------------------------------------- */ $(window).scroll(function() { // ページのトップからのスクロール位置を取得 var pos = $(window).scrollTop(); // スクロール位置の研さ if (200 < pos) { // スクロールが200を超えたら「▲ ページの先頭へ」をゆっくりフェードインする (表示) $('#to-pagetop').fadeIn('slow'); } else { // それ以外だったらフェードアウトする (非表示) $('#to-pagetop').fadeOut('slow'); } }); /* --------------------------------------------------------------------------------- ◆ ページの先頭へ移動するボタンがクリックされた時のイベント --------------------------------------------------------------------------------- */ $('#to-pagetop a').click(function(){ // ページの先頭へ移動する $('html,body').animate({scrollTop:0}, 'fast'); }); }); |
ページのトップからのスクロール位置が 200 を超えたらボタンをフェードインで表示して、逆に 200 に満たない場合はフェードアウトで隠します。
25 行目の [fast] はスクロールする時のスピードなので、遅くする場合は [slow] を指定してください。
WordPress を使ってサイトを作成している場合は、すでにテーマに組み込まれていることが多いので、わざわざ自分で実装をすることはありませんが、最近古い Web サイトのリプレイスを頼まれた時に、実装しないといけなかったので一応まとめておきました。
