[jQuery]スルスルっとトップへ戻るボタンを設置しよう
今回は、スクロールするとふわっと表示されてクリックするとスルスルっとトップまで戻るボタンについて書きます。このページにも実装されていますが、スクロール量が多くなりがちなページには有効な機能かもしれません。
意外と簡単？に実装できますので、レスポンシブ対応のページを作成中であれば、もしかしたら参考になるかも…
実装手順
簡単に行きましょう。手順はこちらです。
- ボタンをマークアップ
- ボタンの見た目を整える
- スクロールとクリックに関するスクリプトを書く
1.ボタン部分をマークアップ
ボタンをフッター近くに配置します。
1 | <p id="page-top"><a href="#">PAGE TOP</a></p> |
2.ボタンの見た目を整える
position: fixed; で位置を固定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 80%; } #page-top a { display: block; background: #666; color: #fff; width: 100px; padding: 25px 0; text-align: center; text-decoration: none; border-radius: 10px; } #page-top a:hover { background: #999; text-decoration: none; } |
ボタンは灰色にしていますが、ここにイラストやアイコンを配置して個性を出すのもアリですね。
3.スクロールとクリックに関するスクリプト
jQueryで書いていきましょう。jQueryを忘れずに埋め込んでおいてくださいね。
まずボタンをマークアップしておいたidの#page-topを指定しておきます。
次にスクロールの処理ですが、最初にボタンは隠しておくので、topBtn.hide(); を先に書いておき、スクロールが500pxに達したらボタンを表示するような記述をします。
数字は変更可能で、表示させたい位置に指定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(function () { var topBtn = $('#page-top'); topBtn.hide(); //スクロールが500に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 500) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スルスルっとスクロールでトップへもどる topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
クリックした時の処理をスクロールの処理の下に書いていきます。アニメーションでスルスルっとトップに戻る処理です。数字は戻る速さですので、お好みで変えていきましょう。
今回は面倒くさがらずデモを作成してみましたので、よかったらご参考にしてください。
どうも5月病というか…知識を詰め込んだりとめどなく考えたりせず、何もしないことを大切にしたいと思うようになったのですが「好きなことをバッサリやめてしまうのはどうかなー」と考え直してブログを再開しました。
マイペースなのとイマイチまとまってなさそうな内容は今までと変わりませんが、これからもよろしくお願いします。ねこま（@necomacustom）でした。