jQueryでページトップを設定
「jquery」でページトップを設定する方法をのご紹介!!
「jquery.js」をダウンロード致します。
ダウンロード先
cssを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style type="text/css"> .pagetop { display: none; position: fixed; bottom: 30px; right: 30px; } .pagetop a { display: block; background-color: #ccc; text-align: center; color: #222; font-size: 12px; text-decoration: none; padding: 20px 10px; } .pagetop a:hover { display: block; background-color: #222; text-align: center; color: #fff; font-size: 12px; text-decoration: none; padding:20px 10px; } </style> |
HTMLを記載
下記のソースを追加してください。
|
1 |
<p class="pagetop"><a href="#wrap">トップ</a></p> |
Javascriptを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(document).ready(function() { var pagetop = $('.pagetop'); $(window).scroll(function () { if ($(this).scrollTop() > 100) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(もっと見る)
参考サイト：WebDesignWorks39
