【jQuery】スクロールすると現れるページトップへボタンの設置方法
- 2013年12月03日
- Javascript, プログラミング
- jQuery, ダム
ある程度ページをスクロールすると、ふわっと出現する「上へ」ボタンを作成する方法です。
ボタンを押すと上までするーっとスクロールします。
デモ
上椎葉ダムの奈落から天端に戻る事ができます。
HTML
<a href="#top" class="page_top">PAGE TOP ▲</a>
今回はページ最上部まで戻すので body に id=”top” を設定してあります。
ボタンには class=”page_top” を設定します。
Javascript
jQuery 依存のスクリプトなので、まず jQuery を読み込んでおきます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
その下に Javascript の処理を記載します。
<script type="text/javascript"> $(function() { var pageTop = $('.page_top'); pageTop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { pageTop.fadeIn(); } else { pageTop.fadeOut(); } }); pageTop.click(function () { $('body, html').animate({scrollTop:0}, 500, 'swing'); return false; }); }); </script>
「600」の部分が表示の条件となるスクロール量です。
上から600px分スクロールしたらボタンを表示します。
「500」がスクロール速度です。
数字が小さいほどシャッと動きます。
CSS
.page_top { position:fixed; bottom:10px; right:10px; padding:10px 20px; color:#fff; font-size:20px; text-decoration:none; background:#000; } .page_top:hover { background:#e74c3c; }
position:fixed; で画面下部に固定します。
あとの見た目はお好みで・・・
色々なサイトを見ましたが、初心者の私はあなたの説明が一番わかりやすい。