2014.02.19 / 更新日:2015.04.21
即完成！jQueryスクロールでページトップへ戻るボタンをたった7分で作る
WEB制作はスピードが命！作るなら簡単ですぐ作れるほうが良いに決まってますよね。
私はこのjQueryスクロールを約7分で実装する事ができました。jQueryの知識はほとんどいりませんでした。
難しくありません7分後にはゆっくりとページトップへ戻るボタンが完成します。
では、早速実装していきましょう。
jQueryスクロールのサンプルはこちら
まずはjQueryのライブラリ追加
HTMLの<head>内にjQueryのライブラリを追加します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
次はHTMLファイルにトップに戻るボタンを追加
肝心の「トップに戻る」ボタンを追加しましょう。
リンク先は「#wrap」に設定してますが、「top」「container」などあなたのサイトに合ったリンク先を設定してください。
ここをきちんと設定してないとうまく動きません。
それからJavaScriptを追加
HTMLの<head>内にJavaScriptを追加します。
$(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は本当に簡単に設置できました。つまずく所はほとんどないと思いますので、是非あなたのサイトに取り入れて欲しいです。
