ページトップ今やWebサイトを作る際にはほぼ必須アイテムとなっているページの最上部に戻るための「ページトップへ」ボタン。最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。そんな「ページトップへ」ボタンの出現方法をフェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、の3つパターンで実装する方法を紹介してみます。「【フェードイン/アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示ページ内を一定距離スクロールすると画面右下に位置固定した形で「ページトップへ」ボタンがフェードインして表示されます。サンプルではページ内を100pxスクロールするとボタンが表示されるようにしてありますがここの距離についてはスクリプト側で設定します。ボタンが出現する際はフェードインアニメーションがかかりスクロール位置が100px未満になるとボタンはフェードアウトします。「ページトップへ」ボタンはクリックするとスクロールアニメーションでページの最上部に戻ります。この「ページトップへ」ボタン実装の全体構成についてHTMLには特に特別な記述はありません。(ボタン用のHTMLソースはスクリプト側から生成します)CSSについては以下のようになります。0.7;}CSSではボタンの形状を指定するほか、[position:fixed]で画面右下に位置固定して、[bottom][right]プロパティで配置位置の調整をします。ボタン自体は[display:none]で非表示の状態にしておきます。実際のスクロールして出現させるスクリプトは以下の様になります。距離を設定する値になります。(px単位)スクリプト4行目がボタンのソースを生成する部分になるのでボタンにテキストや画像を使用するときにはこの部分に書き加えます。ウィンドウが読み込まれた時、スクロールされた時、リサイズされた時それぞれのイベントにスクロール位置を判別し、「showTop」の値と比較してボタンをフェードイン/アウトを切り替えています。ボタンクリックでスクロールアニメーションさせる際のスピードについては9行目にある「500」の数値になるのでここの値を変えることで調整が可能です。続いて、出現するアニメーションがフェードイン/アウトではなくて画面下からスライドインしてボタンが表示されるパターンについて。「【スライドイン/アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示ページ内を一定距離スクロールすると画面右下に位置固定した形で「ページトップへ」ボタンが下方向からスライドインして表示されます。フェードインのサンプル同様にページ内を100pxスクロールするとボタンが表示されるようにしてありますがここの距離についてはスクリプト側で設定します。ボタンが出現する際はスライドインアニメーションがかかりスクロール位置が100px未満になるとボタンは下方向にスライドアウトします。このパターンのCSSについては以下のようになります。-60px」として画面の外に隠しておきます。ボタンの大きさを「50px」にしているので「bottom」の値は「-60px」にして画面外に隠していますがボタンのサイズを変更した場合はこの部分の値も調整する必要があります。実際のスクロールして出現させるスクリプトは以下の様になります。showTop){fixedTop.stop().animate({bottom:'-60px'},200);}});});</script>全体の構成としてはフェードイン/アウトのパターンと同じになります。スライドインのアニメーション設定部分についてはスクリプト14、16行目でCSSの「bottom」の値をアニメーション操作しています。14行目がスライドイン(表示)の値をアニメーション設定し16行目でスライドアウト(非表示)の値をアニメーション設定します。スライドイン/アウトする際のスピードは各アニメーション設定の「200」の数値の部分になりますのでスピードを調整する場合はこの値を変更します。その他のスクリプト動作はフェードイン/アウトのパターンと同様です。最後に、拡大/縮小してボタンが表示されるパターンについて。「【拡大/縮小】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示ページ内を一定距離スクロールすると画面右下に位置固定した形で「ページトップへ」ボタンが拡大アニメーションによって表示されます。他のサンプル同様にページ内を100pxスクロールするとボタンが表示されるようにしてありますがここの距離についてはスクリプト側で設定します。ボタンが出現する際は拡大アニメーションによって表示されスクロール位置が100px未満になるとボタンは縮小アニメーションにて非表示状態になります。このパターンのCSSについては以下のようになります。translateZ(0);}CSSではボタンの形状を指定するほか、[position:fixed]で画面右下に位置固定して、[bottom][right]プロパティで配置位置の調整をします。CSS3アニメーションの[transform:scale]の値を「0」にすることでボタン自体を非表示の状態にしておきます。ボタン表示動作についてはボタンに対してCSSクラス「.show」がつくと表示状態になる構成になっているので「.show」に対して拡大アニメーションの設定をつけておきます。拡大/縮小する際のスピードは各「transition」設定の「0.3s」の数値の部分になりますのでスピードを調整する場合はこの値を変更します。実際のスクロールして出現させるスクリプトは以下の様になります。showTop){fixedTop.removeClass('show');}});});</script>全体の構成としては他のパターンと同じになります。拡大アニメーション設定部分については14行目でボタン要素にCSSクラス「.show」を付けて拡大アニメーションを動作させて表示状態にし16行目でボタン要素からCSSクラス「.show」を外すことで縮小アニメーションにて非表示状態にしています。以上、3つのパターンにてスクロールすると表示するページトップへ戻るボタンを実装する紹介でした。「ページトップへ」のボタンだけでも出現方法にすこし演出を加えることで違った印象を与えることが出来るかと思っております。「ページトップへ」のボタンを実装する際にぜひ。PostsjQueryでスクロール追尾型メニューリストを作ってみるThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。【IE6対応版】jQueryでThickboxの様なモーダルウィンドウを簡易的に実装するサンプルjQueryでCSSアニメーションを実行させる方法ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。