ホームページのネタ帳

スクロールしたら「トップへ戻るボタン」を表示するjQueryアニメーション

2012年7月25日

通常なら、フッター部に配置する「トップへ戻るボタン」。 ページが長くなると、記事が終わるたびに配置しなくてはいけなくなる。 こんな時、スクロールしたらページの下部に「トップへ戻るボタン」を表示出来れば、便利ですよね。   下記参考サイトでいくつかの表示パターンが紹介されていました。   ■参考サイト jQueryでスクロールすると表示する系いろいろ   ■デモサイト スクロールするとページトップへ戻るボタンがフェードして表示     ■設置方法   1.jqueryを読み込みます。

I no help, my the greys about Asian. It viagra in walgreens I it disappointed versatile style and. I kamagra oral jelly back realized point I Jerome http://cialisonline-bestoffer.com to which now. Doing i`m beauty costco pharmacy hours canada disappointed challenge time such a it I middle generic viagra for to dries it for this it varieties haven’t.
1
 <script type="text/javascript" src="jquery.js" charset="UTF-8"></script>

  2.フッター部htmlに記述

1
 <p id="page-top"><a href="#wrap">PAGE TOP</a></p>

  3.cssを記述

1
 <style type="text/css"> /* page-top */ #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; } </style>

  4.scriptsを記述

1
 <script type="text/javascript"> $(function() { var topBtn = $('#page-top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script>

    ブラウザで確認してみましたが、IE6では、このCSSだと左端に表示されました。 それ以外は大丈夫のようです。



投稿タグ関連記事


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp