今回は、web初心者向けにスクロールすると表示されるjQueryを実装します。
このブログに、付いていますスクロールすると表示される「PAGE TOP↑」です。
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function () { //初期は非表示 $("#hello").hide(); $(window).scroll(function () { //100pxスクロールしたら if ($(this).scrollTop() > 100) { //フェードインで表示 $('#hello').fadeIn(); } else { $('#hello').fadeOut(); } }); }); |
初期設定で「#hello」（idが#hellopが付いている要素）は、非表示設定にしてあります。
100pxスクロールしたら、「$('#hello').fadeIn();」表示されるように設定しています。
HTMLを設置します STEP3
|
1 |
<p id="hello">表示されたかな</p> |
これだけでは、画面がスクロールし表示が確認できないので＜br＞（改行）をたくさん入れてください。
CSSを記述します STEP4
|
1 2 3 4 5 6 7 8 9 |
<style type="text/css"> #hello { position: fixed; bottom: 30px; margin-left: 150px; background-color: #CCC; padding: 20px; } </style> |
表示がわかりやすくするために、CSSをつけました。
まとめ
[サンプル] jQuery スクロールすると表示されるを実装する
よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。
「ページトップへ戻る」などでよく使われますのでぜひ試してみてください。
※firefox、クローム、IEで動いていることを確認しております。
