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

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

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

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

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

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

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

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

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

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

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

jQuery: The Write Less, Do More, JavaScript Library

ここで最新のjQueryをダウンロードし、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を指定するのも良し。デス。

■ラスト!

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

<a class="pagetop" href="#top">ページの先頭に戻る</a>

ここまでやったらMTを再構築すれば・・・出来ましたicon:body_peace
せっかくほかのelementも手に入れたので、
時間があれば色々挑戦していきたいです。

とりあえずは今日はここまで



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です