よく見かける「トップへ戻る」を作ってみます。
ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。
それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロールします。
（たまにうっとおしく感じることがあります。）
意外と簡単に実装できますので、是非お試しください。
HTML & CSSとjQueryで実装できます。
サンプルも作っています。
こんな機能を作ってみます！
- 100px以上スクロールされると、画面右下に「トップへ」ボタンを固定表示する。
- スクロール量が100px未満の場合は「トップへ」ボタンを非表示にする。
- 「トップへ」ボタンをクリックするとページの最上部へスクロール移動する。
HTML（ページの最上部へスクロールする）
|
1 2 3 4 5 |
<p class="page-top"> <a href="#top"> <span>↑<br>トップへ</span> </a> </p> |
「トップへ戻る」のボタンを作ります。
最上部に「page-top」というクラスを付けておきます。
「href」で設定しているリンクは何でもOKです。
後に出てくるjQueryの処理でこのリンクはキャンセルされます。
CSS（ページの最上部へスクロールする）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.page-top{ position:fixed; bottom:20px; right:20px; z-index: 100; } .page-top a{ display: table-cell; vertical-align: middle; width: 70px; height:70px; background-color: black; color: #fff; font-size: 10px; text-decoration: none; text-align: center; } |
「page-top」クラスを「position:fixed」にして右下に固定しています。
忘れがちですが「z-index」も指定して他の要素の後ろに回らないようにしておきましょう。
「a」タグは好きに装飾してもらってOKです。
jQuery（ページの最上部へスクロールする）
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ var topBtn = $('.page-top'); topBtn.hide(); $(window).scroll(function () { $(this).scrollTop() > 100 ? topBtn.fadeIn() : topBtn.fadeOut(); }); topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
[ 2〜3行目 ]
最初は表示されていなくてもOKなので「トップへ」ボタンを非表示にしています。
[ 4〜６行目 ]
ページがスクロールされた時に実行される処理です。
「$(this).scrollTop()」で最上部からどれだけスクロールされているかの値が返ってきますので、「スクロール量が100pxを超えていたらフェードインで表示」「100px未満ならフェードアウトで非表示」にしています。
[ 7〜10行目 ]
「トップへ」ボタンがクリックされた時に実行されます。
「$(‘body,html’).animate」の部分はお決まりだと思ってください。
ブラウザによって「body」と「html」指定する要素が違うので初めから両方指定しておきましょうというやつですね。
「animate」の引数「scrollTop:0」は分かると思いますが、ページのスクロール量0の箇所、最上部を指定しています。
「500」は「500ミリ秒（0.5秒）でスクロールする」という意味です。
最後の「return false」はボタンのクリック処理を「キャンセル」しています。
これにより「aタグのリンク先に移動する」という処理がキャンセルされます。
サンプルも作ったので見てくださいね。
