- 索引
-
- └ サンプル目次
- 1章:短編集
- 2章:診断系コンテンツ
- 3章:製品抽出系コンテンツ
-
- ├ 構成の確認
- ├ 回答の確認
- ├ 点数表の作成
- ├ 得点の集計(1)
- ├ 得点の集計(2)
- ├ 結果画面の作成(1)
- └ 結果画面の作成(2)
- 番外:Simulation Game
-
- ├ 地形データの読込
- ├ ユニットの移動
- ├ 敵ユニットの扱い
- ├ 敵AI:目的地に移動出
- └ 一応の終わり
スムーススクロール(1)
サンプル紹介

スクロールでページ内を移動
スムーススクロールとはページ内アンカーにスクロールで移動する演出のことです。実際にサンプルを確認した方が早いと思うので、左図をクリックして下さい。
このサンプルのページ上部にあるcontent_1〜content_5のどれかをクリックすると、該当するコンテンツまでスクロールで移動します。また各コンテンツ内には「トップへ戻る」リンクが作成されており、これをクリックすることでページのトップにスクロールで移動します。
概要
ブラウザのページ内リンクの機能をOFFにしてjQueryで演出
スムーススクロールはブラウザのページ内リンクの機能をOFFにして、代わりにjQueryでページをスクロールさせて実現します。よく利用される技術でプラグインなどもありますが、難易度は高くないのでjQueryの理解を深めるために自力で作成してみましょう。今回はブラウザの機能をOFFにするところまで説明し、スクロールに関しては次回説明します。
解説
htmlの確認
まずはjQueryを利用していないサンプルを確認します。サンプル(scroll1/01.html)を開き、ページ上部にあるリンク(content_1,content_2,…)をクリックして下さい。ページ内の各コンテンツへリンクすると思います。
また各コンテンツ(背景色が青のdiv要素)内には「トップに戻る」リンクもあるので、これもクリックしてトップに戻ることを確認して下さい。シンプルなページ内リンクのサンプルですのでhtmlについての説明はしません。
<a id="myTop">ページの始まり</a><br /> <a href="#content_1">content_1</a><br /> ・ <div id="content_1">content 1<br /><a href="#myTop">トップへ戻る</a></div>
スムーススクロールを実現するにはサンプルscroll1/01.htmlで確認したブラウザのページ内リンクの機能をOFFにしなければなりません。次の項ではjQueryを利用してページ内リンクをOFFにします。
ブラウザの機能をOFFにする
jQueryでブラウザの機能をOFFにするためにはイベントオブジェクトのpreventDefaultメソッドを利用するかfalseを返す必要があります。この説明に関しては使い方「イベントフロー(2)」で紹介しているので確認して下さい(falseを返すテクニックは「メモ」にあります)。
ではサンプル(scroll1/02.html)を開き、リンクをクリックしても機能しないことを確認して下さい。jQueryは以下の様に記述され、a要素のclickイベントに設定したfunction内でfalseを返しているだけです(preventDefaultメソッドでも良いのですが名前が長いので...)。
$("a").click(function() { return false; });
これでブラウザの機能がOFFになり、a要素をクリックしてもリンクしなくなるのです。しかし、これでは別ページに移動するリンクも機能しなくなってしまいます。サンプル(scroll1/02b.html)を開き、一番上にgoogleへのリンクが追加されているのを確認して下さい。しかしクリックしても機能しません。
<a href="http://www.google.co.jp/">google</a><br />
これでは他のページに移動できなくなってしまうので、ページ内リンクだけOFFにするように変更します。
ページ内リンクだけOFFにする
ページ内リンクは必ず#から始まるので、これを利用します。サンプル(scroll1/03.html)のソースを開き、body内の構成がscroll1/02b.htmlと同じ(googleへのリンク有り)ことを確認して下さい。jQueryでは以下の様にセレクタが変更されています。
$("a[href^=#]").click(function() { return false; });
これは属性の前方一致する要素を選択するセレクタで、リファレンスには[ 属性名 ^= '値' ]と紹介しています。ですから上記の表記で「#から始まるhref属性を持つ要素」となるのです。
実際にgoogleのリンクをクリックして下さい。これはページ内リンク(#から始まるリンク)ではないので、クリックするとリンクします。ページ内リンクだけがOFFになったことを確認して下さい。
次回はjQueryで目的のコンテンツまでスクロールするようにします。