ページをスクロールすると「トップ」へのアイコンが現れるページをよく見かける。
これもスマホで見る場合が多くなたためと思われる。また、縦長のページが増えているためかもしれない。
この縦長ページもスマホ用という感じがする。スマホはパソコンと違って、縦のスコロールが容易だからだろう。
このスクリプトを探してみたので報告。
まずHIML
|
1 |
<p id="page-top"><a href="#wrap">PAGE TOP</a></p> |
これは単純に文字列とする。リンク先はwrap。場合によってはcontainer。
CSS
まずは現れる場所をposition: fixed;で固定。
|
1 2 3 4 5 6 |
#page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } |
リンクで文字を装飾。ここはいろいろ好みで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; } |
JAVASCRIPT
ここは自分の理解のために解説してみる。
変数topBtnに#page-topを代入
これを非表示
scrollイベントを使って、スクロールが起きたら以下を実行
.scrollTop() でスクロール位置を取得
それが100を超えたら
topBtn（すなわち#page-top）をフェードインする
でなければフェードアウト
また、
clickイベントを使って、クリックされたら
animate関数をつかって、
ページをスクロール０の位置に500msで表示する。
なお、return false;は
clickイベントを実行した後にリンク先に移動してしまう
それを防ぐ為の記述らしい。よくわからないけど。
この点については柴原氏のブログにある。
以下の記述となる。
|
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(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
実際は公開した以下のサイトで
http://ogu-tec.net/test/webtest06/ypcwebtest02/
スクリプトはヘッダに書きます。
|
1 2 3 4 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> ここに記述 </script> |
