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