jQueryでスムーズにスクロールさせる

今日は朝一番で仕事関連のデータをサーバーにアップしようとしたとたん、
なぜかCSSがまったく読み込まれず、レイアウトがメチャクチャに・・・

その後、データの確認作業をしたところ、CSSの記述が・・・ごっそり消えてしまいマシタ・・・
間違えてDeleteキーでも押してしまったのか？
理由はまったく分かりません。（電源が落ちたわけでもないし・・・）

とにかく記述したはずのCSSの内容を泣く泣く書き直して作業終了（とりあえず）
あ?せめて一度サーバーにアップするとか、バックアップを取った後にしてほしかったデス。

とにかく落ち着いたので、数日前のMT自分用メモを。

そろそろ記事が多くなってきたので、ページの下部にある
『ページトップへ戻る』をクリックしたときに
スルスル?っと移動するJavaScriptをMTに組み込みました。

皆さん利用しているのは色々あるみたいですが、
今回参考にさせてもらったのは、
MovableTyle備忘録さんのぺーじにあった『ｊQueryを利用する』パターンです。

今回は、このMTだけじゃなく、使用しているドメイン全体で使いたいなぁ?と思っているので、
私の場合はディレクトリはこんな感じ。

================================================

http://194.91.4.143/wp2023/
|
+-- index.html               <-- 各自のトップページ
+-- js/
|    +-- jquery/
|    |    +-- interface/
|    |    |    +-- ifxscrollto.js <-- スムーススクロール用
|    |    +-- jquery.js
|    |    +-- jquery-effect.js
|    |
+-- mt/
================================================

■まずは必要なJavaScriptを入手します。

jQuery: The Write Less, Do More, JavaScript Library

ここで最新のｊQueryをダウンロードし、jquery.js とリネームしてから
サーバーにアップ。

■次に interface.js をダウンロードします。

Interface elements for jQuery

ここで紹介されているelementは沢山あるので今回は
『scroll』だけでいいのですが、面倒なので全部パックになっている
『Interface 1.2 146kb (source files, compressed files)』を
ダウンロードさせて頂きました。
Zipファイルを解凍して、『ifxscrollto.js』を探せばOKです。

■そしてスムーススクロール用のコードを記述。
以下の記述をメモ帳などで記述、
jquery-effect.js というファイル名で保存します。

===========================================

$(function() {
$(‘a.pagetop’).click(function() {
$(‘#top’).ScrollTo(800, ‘easeout’); return false;
});
});
===========================================

呪文のようですが･･･
【a.pagetopをクリックした場合のスクロールの値】を
設定しています。

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

‘easeout’ とすることで、滑らかなスクロールになるんだそうです。
（これも受け売りで icon:face_embarrassed ）

■MTのテンプレートにJavaScriptを読み込ませる指示を追加。

HTMLのヘッダ内（<head>?</head>）に記述するので、
MTのヘッダーモジュールに追加すればOK♪

===========================================

<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>

===========================================

<$MTBlogURL$>の部分はもちろん”http://www.●●.com/js/…”とURLを指定するのも良し。デス。

■ラスト！

そして、ページの先頭に戻るためのリンクを追加します。