2014.02.19
即完成！jQueryスクロールでページトップへ戻るボタンをたった7分で作る
WEB制作はスピードが命！作るなら簡単ですぐ作れるほうが良いに決まってますよね。
私はこのjQueryスクロールを約7分で実装する事ができました。jQueryの知識はほとんどいりませんでした。
難しくありません7分後にはゆっくりとページトップへ戻るボタンが完成します。
では、早速実装していきましょう。
jQueryスクロールのサンプルはこちら
まずはjQueryのライブラリ追加
HTMLの<head>内にjQueryのライブラリを追加します。
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
次はHTMLファイルにトップに戻るボタンを追加
肝心の「トップに戻る」ボタンを追加しましょう。
1 | <p class="pagetop"><a href="#wrap">トップ</a></p> |
リンク先は「#wrap」に設定してますが、「top」「container」などあなたのサイトに合ったリンク先を設定してください。
ここをきちんと設定してないとうまく動きません。
それからJavaScriptを追加
HTMLの<head>内にJavaScriptを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(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; });}); |
「100」はボタンの出現位置の指定で「100」の場合は上から100pxスクロールした時に表示されます。
「500」はトップへ戻る速度を調整している数字です。例えば「300」にしたら500よりも早くトップへ到達。「700」にしたら「500」よりも遅く到達します。
最後はCSSを調整
CSSでデザインを調整していきます。
今はグレー系でデザインしていますが、サイトに合ったデザインをして下さい。
もし画像を使ってオリジナルデザインにしたい場合は「<p class=”pagetop”><a href=”#wrap”>トップ</a></p>」トップの所を<img>タグに変えて画像を設定して下さい。
注意
IEは上手く動きません。
追記：IEの10と11は作動確認済みです。
jQueryスクロールのサンプルはこちら
まとめ
このjQueryは本当に簡単に設置できました。つまずく所はほとんどないと思いますので、是非あなたのサイトに取り入れて欲しいです。