2014.02.19

即完成!jQueryスクロールでページトップへ戻るボタンをたった7分で作る

  • このエントリーをはてなブックマークに追加

pagetop-main

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は本当に簡単に設置できました。つまずく所はほとんどないと思いますので、是非あなたのサイトに取り入れて欲しいです。

  • このエントリーをはてなブックマークに追加

jQuery

ソーシャルメディアでもご購読できます。

« »

トップ