Movable Type 備忘録

jQueryでスムーススクロール

Jun212007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, jQuery

Next Page: jQueryでLightbox風な表示やってみる(ThickBox)
Prev Page: jQueryを使ってみる

こんにちわ^^

前回、jQueryを使ってみるで jQuery の基本的なことを勉強しました。
今回は jQuery + interface.js を使って、スムーススクロールに TRY してみたので、そのカスタマイズをご紹介します。

まずはサンプルですね。以下のページ中の下の方に 'ページの先頭に戻る' というリンクがありますので、そちらをクリックしてみてください。
サンプル

ディレクトリ構成

http://●●●.com/
  |
  +-- index.html               <-- 各自のトップページ
  +-- styles-site.css          <-- 各自のスタイルシート
  |
  +-- js/
  |    +-- jquery/
  |    |    +-- interface/
  |    |    |    +-- ifxscrollto.js <-- スムーススクロール用
  |    |    |
  |    |    +-- jquery.js
  |    |    +-- jquery-effect.js
  |    |

カスタマイズ

まずは必要な JavaScript をダウンロードします。

こちらの jQuery JavaScript library から jquery-latest.js をダウンロードして、上記ディレクトリ構成のようにアップロードします。
その際、jquery-latest.js を jquery.js とリネームしておきます。

次に interface.js をダウンロードします。
こちらの Interface elements for jQuery の画面中の 'scroll' をクリックして、画面上の「download your selection」をクリックすることで、選択したライブラリのみダウンロードできます。

そして、上記ディレクトリ構成のようにアップロードします。
その際、interface.js を ifxscrollto.js とリネームしておきます。

ライブラリの管理の仕方は各自のお好みでどうぞ。
次にスムーススクロール用のコードをアップロードします。
以下のコードをコピペして、jquery-effect.js というファイル名で保存します。
jquery-effect.js
1. $(function() {
2. $('a.pagetop').click(function() {
3. $('#top').ScrollTo(1000, 'easeout'); return false;
4. });
5. });
青い字の部分で、a.pagetop というリンクをクリックした場合･･･という指定をしています。
参考：API/1.1.2/Events

赤い字の部分が実際にクリックされた際、実行されるコードになります。

ここでは、'#top' という ID タグにスクロールするようにしています。
また、緑の字の部分でスクロールの速さ(ミリ秒)を指定してます。速さは各自のお好みでどうぞ♪

カーキ色の字の部分では 'easeout' とすることで、滑らかなスクロールになるんだそうです。
※ここで指定するパラメータはどのドキュメント見て知ったのかなぁ (´･д･`)
最後にテンプレートを変更します。
まずは HTML ヘッダ(<head>～</head>)内に以下を追加します。
1. <script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script>
2. <script type="text/javascript" src="<$MTBlogURL$>js/jquery/interface/ifxscrollto.js"></script>
3. <script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery-effect.js"></script>
そして、ページの先頭に戻るためのリンクを追加します。
追加する場所は各自のサイトのデザインに合わせてください。
1. <a class="pagetop" href="#top">ページの先頭に戻る</a>
一通り変更したら再構築しちゃいます。