Movable Type 備忘録

 jQueryでスムーススクロール

  • Jun212007
  • Vote:
    http://bizcaz.com/archives/2007/06/21-145954.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんにちわ^^

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

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

ディレクトリ構成

  1. http://●●●.com/
  2.   |
  3.   +-- index.html <-- 各自のトップページ
  4.   +-- styles-site.css <-- 各自のスタイルシート
  5.   |
  6.   +-- js/
  7.   | +-- jquery/
  8.   | | +-- interface/
  9.   | | | +-- ifxscrollto.js <-- スムーススクロール用
  10.   | | |
  11.   | | +-- jquery.js
  12.   | | +-- jquery-effect.js
  13.   | |

カスタマイズ

  1. まずは必要な 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 とリネームしておきます。

    ライブラリの管理の仕方は各自のお好みでどうぞ。

  2. 次にスムーススクロール用のコードをアップロードします。
    以下のコードをコピペして、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' とすることで、滑らかなスクロールになるんだそうです。
    ※ここで指定するパラメータはどのドキュメント見て知ったのかなぁ (´･д･`)

  3. 最後にテンプレートを変更します。
    まずは 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>

    一通り変更したら再構築しちゃいます。

以上です。

今回はスムーススクロールの機能だけの interface.js(ifxscrollto.js) を作成しました。
こんなかんじで、機能ごとにファイル化して必要なときに必要な分だけ読み込むようにしよう･･･と考えてる今日この頃です。

スムーススクロールについて、Emotional WebさんのInterface.jsで簡単スムーススクロールを参考にさせてもらいました。
とっても分かりやすく説明されてます (￣∇￣)b

 Trackback Pings(1)

from Webディレクションやってます blog

名村は、Webサイトを見ていて、「こうなった使いやすいかな？」と思ったりする技術を集めておくのは、まぁ、趣味みたいなものです(笑) ただ、自分がエン...

Tracked on December 18, 2007

 Comments(21)

#1: Posted by hiro @ November 15, 2008 [REPLY]
user-pic

こんばんは。
jqueryのスムーススクロールですけど、bzbellさんとこでは、下部のページ切り替えのところでも、スムーススクロールしてページが切り替わりますよね。
これって、どうやるんですか。PageBute.plをいじくってみましたが、スクロールするだけで、ページが切り替わりません。差し支えなければ、教えていただけますか？

 
#2: Posted by Author Profile Page bzbellからhiroへの返信 @ November 15, 2008 [REPLY]
user-pic

>>1 hiro さん

こんばんわ^^
これは PageBute ではできないんですあせあせ
しくみは至ってカンタンで、スクロールが完了したらコンテンツ部分のみのファイルを Ajax でロードしてるだけなんですよ。
なので、ページ移動してるわけじゃなく、コンテンツ部分のみ表示を切り替えてるってかんじです。

作り方は以下の通りです。

  1. メインインデックスとは別に 1 ～ 5 ページ分のコンテンツ部分のみのファイルを作成します。これは WriteToFile プラグインで実現できます。

  2. 後はスムーススクロール後、クリックページのファイルを AJax を使って所定の場所に表示します。

以上です。 カンタンに言うとこんなかんじなのですが･･･以前わたしのサイトでこの方法を記事にしてますので参考にしてください。 http://bizcaz.com/archives/2008/09/13-194555.php
 
#3: Posted by hiro @ December 12, 2008 [REPLY]
user-pic

こんばんは。
仕事が忙しくなって、返事が大変、遅くなってしまって申し訳ないです。
ありがとうございます。
頑張ってチャレンジしてみます。
一つ、わからないのが、スクロールしてからページを切り替える、このタイミングの動作は
Ajaxでやってるんでしょうか。

あと、config.yamlファイルについて質問なのですが、TeraPadで上書き保存（何の変更も加えず）してアップすると
CODE INCOMPLETE　とエラーが出ちゃいます。改行コードをいろいろ変えてみたけど、駄目でした。
config,yamlをオリジナルにさしかえてアップすると、正常に表示されます。
config.yamlをいじりたいので、どうやって保存したら、いいんでしょうか？
宜しくお願いします。

 
#4: Posted by Author Profile Page bzbellからhiroへの返信 @ December 13, 2008 [REPLY]
user-pic

>>3 hiro さん

こんばんわ^^

師走ですからねやあ！
わたしも最近忘年会やら飲み会やらで忙しい!? 毎日ですあせあせ

> 一つ、わからないのが、スクロールしてからページを切り替える、このタイミングの動作は
> Ajaxでやってるんでしょうか。

はい。
スクロールが完了したら Ajax で任意のページ読込み･･･ってかんじです。
hiro さんのサイトでは jQuery をお使いですか!? サンプルお作りしましょうか!?

> config.yamlをいじりたいので、どうやって保存したら、いいんでしょうか？

考えられることは、

  1. タグを使ってませんか!?
    YAML ではインデントなどにタブを使えないんです。必ずスペースでインデントする必要があります。
  2. セクションの末尾にコロン( : )はありますか!?
    コロンがないとエラーするかもです。
  3. お使いの MT の文字コードに依存するのかも。
    ちょとこれは自信ないですが、わたしのサイトでは UTF-8 なのでファイルもすべて UTF-8 で保存するよう気をつけてます。
手っ取り早く、サイドバーにある Contact Me のメアド宛てに hiro さんが作った config.yaml を送って頂ければ添削しますよにこっ！
 
#5: Posted by hiro @ December 13, 2008 [REPLY]
user-pic

bzbellさん、
こんにちは。

サンプルを作っていただけるんですか、ありがとうございます。

現在、bzbellさんのテンプレートを使っているんですけど、勉強のため、新たに、サイトを立ち上げ、
テンプレートから自作しようと企てています。
こちらの、テンプレートを改造した方が早いのかなと思ったけど、bzbellさんのＣＳＳはなかなか、理解しづらくて・・・
そこで、思い切って、勉強のため、自作しちゃえ！ということになった次第です。
デザインはオリジナル、中身はほとんど、bzbellさんのものを流用？

ということで、こちらの、テンプレートセットの作り方や、小粋空間さんのパーフェクトガイドを参考にして
とりあえず、テンプレートセットをデフォルトで作ったのですが、ひょんなことで、config.yamlをteraPadで
上書きしてアップしたら、エラーがでちゃったんです。そこで、試しに、bzbellさんのテンプレートでも、config.yamlをTearPadで上書きしたら、エラーになります。オリジナルをアップすると、正常に表示されます。
だから、ＦＴＰは問題ないと思うので、TeraPadの設定に問題があるのでしょうか。
ちなみに、TearPadの設定は
文字コードの設定で
文字/改行コードを自動認識する
再読込は現在の文字コードで行う
上記、2つとも、チェックをいれ、
初期文字コード・・・ＵＴＦ－8　　初期改行コード・・・ＬＦ
保存文字コード・・・ＵＴＦ－8　　保存改行コード・・・ＬＦ
です。
改行コードをいろいろ、組み合わせてみたけど、駄目でした。
なんででしょうね。

といあえず、１回、メールでconfig.yamlを送ります。
宜しくお願いします。

 
#6: Posted by Author Profile Page bzbellからhiroへの返信 @ December 13, 2008 [REPLY]
user-pic

>>5 hiro さん

えっ!! わたしの CSS ムズかしいですかしくしく
分かりやすく書けるよう努力しますガーン

先ほど hiro さん宅に、わたしの方で変換した config.yaml をお送りしました。
原因は BOM 付きのファイルになってたことが原因です。
TeraPad というエディタは使ってないので分からないのですが、BOM あり／なしでファイル保存可能なエディタなんだと思います。
Windows のメモ帳などはこのような機能はついてません。

また、BOM 対応は必須ではないので未対応なソフトが多いそうです。
MT もそのソフトウェアの一つになりますかね。なので、今後は BOM なしでファイル保存されるといいですよブイブイ

 
#7: Posted by Author Profile Page bzbellからhiroへの返信 @ December 13, 2008 [REPLY]
user-pic

>>5 hiro さん

サンプルの件ですが、hiro さんが作成されたテンプレートセット一式をメルして頂ければ、インデックステンプレートをカスタマイズしてあげます。
そのファイルを見比べれば修正箇所など分かりやすいかと思いますウインク

 
#8: Posted by hiro @ December 14, 2008 [REPLY]
user-pic

bzbellさん、
こんにちは。

ファイルありがとうございます。
そのまま、アップしたら、エラーなく無事表示されました。
でも、ＢＯＭってはじめて聞きました。TeraPadで調べたのですが、どこで、その設定をすれば
いいのかわかりませんでした。
そこで、bzbellさんは何を使っているか教えて頂けますか？
それを使って、再度、テンプレートを保存してみようと思います。

あと、僕のテンプレートセットを送る前に、testしておこうと思って、テンプレートを切り替えて、
再構築したら、案の定、エラーになっちゃいました。
エラーになった、ブログ記事のテンプレートをみたら、
1行目が
?
となってました。文字化けですね。ＢＯＭの影響でしょうか。
あと、
テンプレート「ブログ記事」の再構築中にエラーが発生しました: タグでエラーがありました: 「Header」というモジュールテンプレートが見つかりませんでした。
というエラーです。これも関係あるのかな？

とりあえず、テンプレート１式送りますので、宜しくお願いします。

 
#9: Posted by Author Profile Page bzbellからhiroへの返信 @ December 15, 2008 [REPLY]
user-pic

>>8 hiro さん

こんばんわ^^

> そのまま、アップしたら、エラーなく無事表示されました。

良かったですねワクワク
わたしは有料のエディタを使ってます。「秀丸」っていうの。
周りがみんなそのエディタを使っててオススメされたので購入しちゃいましたの。

> 1行目が ? 文字化けですね。ＢＯＭの影響でしょうか。

詳しくは調べてみないと分かりませんがその可能性ありかもです。

> 「Header」というモジュールテンプレートが見つかりませんでした。
> というエラーです。これも関係あるのかな？

ローカライズってご存知でしょうか。
具体的にはプラグインのフォルダ中に lib/L10N/ というフォルダがあります。その中に ja.pm という日本語変換ファイルがあるのですが、hiro さんはこのファイルをイジってますか!?
仮にイジって場合、記述ミスがあると本来「Header」という英字を「ヘッダー」に変換されるのですが、その変換がされなくなってしまいますのでご注意ください。

> とりあえず、テンプレート１式送りますので、宜しくお願いします。

あれっ!? もぅいいんですのあせあせ!?
ページング処理のカスタマイズを行うと、大きくテンプレートを変更する必要があるので、とりあえず完成してからの方が良いように思いますようぅ～ん

 
#10: Posted by hiro @ December 16, 2008 [REPLY]
user-pic

こんばんは。

秀丸ですか。
昔から有名ですね。
あれから、調べて、TeraPadでもできることがわかりました。

これから、全てのテンプレートをＢＯＭなしで保存し直して、完成させてから、
また、ご連絡しますね。

そのときはまた、宜しくお願いします。

 
#11: Posted by Author Profile Page bzbellからhiroへの返信 @ December 16, 2008 [REPLY]
user-pic

>>10 hiro さん

> これから、全てのテンプレートをＢＯＭなしで保存し直して、完成させてから、
> また、ご連絡しますね。

はい。がんばってステキなテンプレ作ってくださ～いやあ！

 
#12: Posted by hiro @ January 11, 2009 [REPLY]
user-pic

こんばんは。
明けましておめでとうございます。
昨年はいろいろと教えて頂いて、ありがとうございます。
また、今年も宜しくおねがいします。

やっと、テンプレが完成しました。ファイルを送ってもよろしいですか？

また、ひとつ、お聞きしたいんですが、テンプレートでサイドバーにウィジエットを予め、セットするのは
どうすればいいんでしょうか。

宜しくお願いします。

 
#13: Posted by Author Profile Page bzbellからhiroへの返信 @ January 11, 2009 [REPLY]
user-pic

>>12 hiro さん

こんばんわ^^

明けましておめでとうございます。
本年もよろしくお願いしますもじもじ

> やっと、テンプレが完成しました。ファイルを送ってもよろしいですか？

はい。テンプレート一式を圧縮したファイルを右上のメールフォームから添付して送ってください。折り返しカスタマイズしたものをお送りします。

hiro さんとこのサイトでは JavaScript に何を使ってますか!? prototype!? jQuery!?

 
#14: Posted by haru @ June 19, 2009 [REPLY]
user-pic

お久しぶりです!(^^)!

またまた・・トラブル発生しました。^^;
ライブラリーjqueryのスプリクトを構築しました。
MT 月別アーカイブリスト プルダウン式のテンプレート
http://www.css-lecture.com/log/movable-type/mt-archive-list.html#more

以前教えて頂いたshadowboxとスムーススクロールが動かなくなり
shadowboxは、prototypeからjqueryに変更して動くようになったんですが、
スムーススクロールは、動かないのでjqueryのスムーススクロールに
変えようと思っています。
説明どうりに設定しているのですが、一か所のjquery-latest.jsをダウロードできなくて
探しているんでがみつかりません。
何かサンプルでもあれば、使わせて頂きたいのですが
jquery-1.3.2.min.jsをjquery.jsにリネームでは、ダメですよね。
お忙しとこと申し訳ございませんが宜しくお願いします。

 
#15: Posted by Author Profile Page bzbellからharuへの返信 @ June 19, 2009 [REPLY]
user-pic

>>14 haru さん

こんばんわ^^

先ほど確認したところ、FoldNavigation というのが見つからない…という JavaScript エラーが発生しています。それが原因の可能性があります。
あと、ブログページにおいて now_date というセレクタがないようです。
それによる JavaScript エラーも発生しているようです。
ご確認くださいぺこり

 
#16: Posted by haru @ June 19, 2009 [REPLY]
user-pic

ありがとうございます。^^;
FoldNavigation ・now_date って
なんですか？？

すみません。
ぜんぜん詳しくわからなくて　(>_

 
#17: Posted by Author Profile Page bzbellからharuへの返信 @ June 20, 2009 [REPLY]
user-pic

>>16 haru さん

こんばんわ^^

haru さんは FoldNavigation や now_date を使ってるという認識がないわけですね。
それでしたら、サイト作成者さまにご相談した方がよいかと思います。

要するに、
  1. prototype と jQuery を混在して使ってます。
  2. 以前ロードしていた JavaScript を今はロードしていません。それによるエラーが発生してます。
大まかに言うとこんなかんじなのですが分かりますでしょうかあせあせ
 
#18: Posted by haru @ June 20, 2009 [REPLY]
user-pic

お返事ありがとうございます。(^_^.)

そうですか・・
業者さんも直せないみたいですね。(>_ ＭＴサイトを管理してくれいいる訳でなくて
設置のみやってもらっているだけですから

結構・・重症ですか。

 
#19: Posted by Author Profile Page bzbellからharuへの返信 @ June 20, 2009 [REPLY]
user-pic

>>18 haru さん

>>15 のエラーが原因で shadowbox が使えなくなったのか、必ずしも言い切れませんキョロキョロ
ですが JavaScript エラーは何れにしても対処しておいた方がよいですねにこっ！

> 業者さんも直せないみたいですね。

そいうことですか。 たとえば、
  • haru さんはわたしが伝えたキーワードを元に、原因と思わしきテンプレートを探すことはできますか!?
  • わたしが指摘したコードを削除 or 追加などすることができますか!?
それが可能でしたら何とか対応できるかもしれませんねやあ！
 
#20: Posted by haru @ June 20, 2009 [REPLY]
user-pic

ありがとうございます。!(^^)!

是非　お願いします。
書き換えは、できると思うんですけど・・
ＭＴは、書き間違えると・・ローカル見たいに
戻す事が出来ないので・・・心配です。
一度お問い合わせで、連絡させて頂いてもいいですか。

 
#21: Posted by Author Profile Page bzbellからharuへの返信 @ June 21, 2009 [REPLY]
user-pic

>>20 haru さん

右上にある「Contact Me」のバナーをクリックするとメールフォームが表示されますのでご利用ください。
一応誤解のないように言っておきますと、わたしは基本シロウトです。
本業で WEB 業界に携わってるわけではなく、あくまでもプライベートでサポートさせて頂いてるだけでして業務経験はありません。
そこら辺ご承知おきくださいやあ！

あと、haru さんの手元にありますテンプレート( ファイル )一式を見せることが可能でしたら、わたしの方で修正してお渡しするのが一番手っ取り早いかとキャハハ
その際には「Contact Me」からファイルをアップロードして頂けたらと思います。

 

 Post a Comment

 

コメント用フィード