【そろそろjQueryのスムーズスクロールを自作したいと思わないか】とっかかりを理解すれば楽しくなるはずのjQuery

jQuery

今までjQueryプラグイン（スクリプト）といったら、巷でどなたかが作成されて配布されたものを、ただただ実装したりして「できた～」って満足して「はい、終了～！」ってなっていたりしまして。

・・・それはそれで、やりたいことが手っ取り早く出来るって意味では全然OKなんですが、

「そもそもどうやって動いているんだ？」

と、実は毎回設置（実装）できてもなんか引っかかる思いがありました。なので、今や巷のほとんどのサイトでよく見る「スムーズスクロール」を自作したくなりました。クリックするとページの一番トップにスルスルっと移動するやつです。

こんなやつです。左下とかにピッタリ貼りつくタイプの、よくあるやつですね。

これを、自作しましょう。jQueryの勉強としては最もとっつきやすくてなおかつ実用的なものだと思いますので、機会がありましたら是非ご覧ください。

jQueryを動かす基本「jquery.min.js」を読み込む

まずは、jQueryを動かすためには「jquery.min.js」を読み込みます。これが基礎となるファイルになりますので、読み込みは必須です。googleapiサービスとしてjQueryファイルが提供されていますね。とても便利です。書く場所は、htmlファイル中の<head></head>タグの間に入れましょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

コピー&貼り付けで大丈夫ですよ。

次は「TOPへ戻る」ボタンを作ります。

「TOPへ戻る」ボタンをつくりましょう

それでは、しつこいですがトップへ戻るボタンを作ります。

下のhtmlコードを書きましょう。<body></body>タグの間ならどの場所でもOKです。<div>タグを使っていますけど、別にこだわりはないです。ただし、どのタグでも基本OKなんですが「id=”top”」の指定は後ほど必要になります。必ず書きましょう。

<div id="top">TOPへ戻る</div>

次は、この「TOPへ戻る」ボタンを左下に固定で表示するため、cssを書きます。

cssを書いてページの左下にボタンを固定させます

次はCSS（スタイルシート）を書きます。外部CSSファイルに書いて読み込んでもＯＫですし、htmlファイルの<style></style>タグ内に書くなどでもＯＫです。どちらの方法でもいいので書きます。

#top {
 position: fixed;
 bottom: 10px;
 left:10px;
}
#top a {
 display: block;
}

htmlもcssも、余計な記述があると途端に意味不明になりがちなので、書く内容はできるだけ少なくしています。

一気にいろいろやらず、少しずつやりましょう・・・

ここまで書くとこうなります

今まで書いたものを表示させると、だいたいこうなります。ページを上下にスクロールさせても、左下にピッタリ貼りついてきます。

次は、いよいよjQueryでスムーズスクロールさせる書き方です。

スムーズスクロールさせるjQueryを書きます

今回は<head></head>内に書きます。

<script>
 $(document).ready(function(){
  $(function () {
   $('#top a').click(function () { //「TOPへ戻るボタン」をクリックした時の動作
    $('body,html').animate({ //<body>で囲まれた全体に対して
     scrollTop: 0 //一番トップにスクロールさせる
    }, 1000); //1000ミリ秒 = 1秒の間にスクロール完了（数字を小さくするとスクロール速度が速くなる）
    return false;
   });
  });
 });
</script>

上のコードにうっすら日本語で処理の流れを書きました。やっていることは、スクロールさせているだけです。4行目の「$(‘#top a’)」というところに注目を。これが、先ほど必要といっていた「id=”top”」と関係する箇所です。

例えば「class=”top”」の場合は書き方が変わる「id=”top”」じゃなくて「class=”top”」とした場合、jQueryの4行目は「$(‘.top a’)」と書くことになります。

もっと完結に書くと、

  • <div id=”top”>TOPへ戻る</>　→　$(‘#top a’)
  • <div class=”top”>TOPへ戻る</> →　$(‘.top a’)

と。要はhtmlで指定したidやclassにちゃんと対応させてあげることが重要で、ここがわかれば「ああ、なるほど！」と半分くらいスッキリします。（私はスッキリしました・・・）

htmlとcssの関係にも似ているので、cssの理解がすでにある方はすぐに応用できてしまうはず・・・です。

スクロールできたらフェードイン・フェードアウトもすぐできる

ここで、もう一歩進んでみましょう・・・。特定のところまでスクロールされたら、フェードインフェードアウト。これもできるようにしましょう。

<script>
 $(document).ready(function(){
  $("#top").hide(); //最初はページをスクロールしてない状態はボタンを隠しておく
  $(function () {
   $(window).scroll(function () {
    if ($(this).scrollTop() > 150) { //条件分岐：もし151px以上を「下にスクロールさせた場合」
     $('#top').fadeIn(); //フェードイン（表示する）
    } else { //その他の場合（150px以内をスクロールさせた場合）
     $('#top').fadeOut(); //フェードアウト（非表示にする）
    }
   });

   $('#top a').click(function () {
    $('body,html').animate({ 
     scrollTop: 0 
     }, 1000);
    return false;
   });
  });
 });
</script>

上の動作は、ページのスクロールを下に151pxスクロールさせた場合にボタンが表示されて、150px以内のスクロールだとボタンは非表示になります。もちろん、ボタンを押すとスムーズスクロールでページの上部にスルスルっと移動します。これで、できあがりです。

あとは画像にしたりcssでもっと飾ったりすると、巷でよく見るような、スムーズスクロールボタンが完成します。

まとめ

最近ホントにjQueryの設置依頼が増えてきていまして、いよいよ技術力アップが必要になってきました・・・。なので、自分が後で見たらすぐに思い出せるように、こういった細かいことはなるべくブログ書いておこうかと思います。

また、たぶんおそらく、私みたいに「jQueryのカスタマイズを要求されて勉強し始めている方」は少なくないと思いますので、もし似たような状況の方などいらっしゃいましたら、「ああ、こんな似たようなやついるのか～」といった程度で見て笑っていただけると私も嬉しいですかね。

それにしても、基礎の基礎から学ぶと、なんだかjQueryとの距離も近くなってきたような気がします。

今までよくわからなかったことがスッキリすると、モヤモヤが取れて楽しくなってくる感覚を味わっています。毎日毎日、新しいことの勉強中ということで。どうぞよろしくです。

参考サイトはこちら

まあ・・・こちらの内容を自分なりに理解しただけなんですけどね。有名なサイトですが、英文なので、英文でつまずく方も多いかと思います。よくあるのは、スクリプトそのまま貼り付けとかですかね。http://webdesignerwall.com/tutorials/animated-scroll-to-top

そこから一歩進もうかな～、なんて思いました。

著者:bouya Imamura