Movable Type 備忘録
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
$(function() {$('a.pagetop').click(function() {$('#top').ScrollTo(1000, 'easeout'); return false;});});
青い字の部分で、a.pagetop というリンクをクリックした場合・・・という指定をしています。
参考:API/1.1.2/Events赤い字の部分が実際にクリックされた際、実行されるコードになります。
ここでは、'#top' という ID タグにスクロールするようにしています。
また、緑の字の部分でスクロールの速さ(ミリ秒)を指定してます。速さは各自のお好みでどうぞ♪カーキ色の字の部分では 'easeout' とすることで、滑らかなスクロールになるんだそうです。
※ここで指定するパラメータはどのドキュメント見て知ったのかなぁ (´・д・`)最後にテンプレートを変更します。
まずは HTML ヘッダ(<head>~</head>)内に以下を追加します。<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script><script type="text/javascript" src="<$MTBlogURL$>js/jquery/interface/ifxscrollto.js"></script><script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery-effect.js"></script>
そして、ページの先頭に戻るためのリンクを追加します。
追加する場所は各自のサイトのデザインに合わせてください。<a class="pagetop" href="#top">ページの先頭に戻る</a>
一通り変更したら再構築しちゃいます。
以上です。
今回はスムーススクロールの機能だけの interface.js(ifxscrollto.js) を作成しました。
こんなかんじで、機能ごとにファイル化して必要なときに必要な分だけ読み込むようにしよう・・・と考えてる今日この頃です。
スムーススクロールについて、Emotional WebさんのInterface.jsで簡単スムーススクロールを参考にさせてもらいました。
とっても分かりやすく説明されてます ( ̄∇ ̄)b
Trackback Pings(1)
- from
Webディレクションやってます blog
名村は、Webサイトを見ていて、「こうなった使いやすいかな?」と思ったりする技術を集めておくのは、まぁ、趣味みたいなものです(笑) ただ、自分がエン...
Comments(0)
No comments found.


Post a Comment