デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:短編集
2章:診断系コンテンツ
3章:製品抽出系コンテンツ
番外:Simulation Game

スムーススクロール(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で目的のコンテンツまでスクロールするようにします。