Movable Type 備忘録
jQueryでスムーススクロール
- Prev Page: jQueryを使ってみる
- Next Page: jQueryでLightbox風な表示やってみる(ThickBox)
こんにちわ^^
前回、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サイトを見ていて、「こうなった使いやすいかな?」と思ったりする技術を集めておくのは、まぁ、趣味みたいなものです(笑) ただ、自分がエン...




こんばんは。
jqueryのスムーススクロールですけど、bzbellさんとこでは、下部のページ切り替えのところでも、スムーススクロールしてページが切り替わりますよね。
これって、どうやるんですか。PageBute.plをいじくってみましたが、スクロールするだけで、ページが切り替わりません。差し支えなければ、教えていただけますか?
>>1 hiro さん
こんばんわ^^
作り方は以下の通りです。これは PageBute ではできないんです
しくみは至ってカンタンで、スクロールが完了したらコンテンツ部分のみのファイルを Ajax でロードしてるだけなんですよ。
なので、ページ移動してるわけじゃなく、コンテンツ部分のみ表示を切り替えてるってかんじです。
以上です。 カンタンに言うとこんなかんじなのですが・・・以前わたしのサイトでこの方法を記事にしてますので参考にしてください。 http://bizcaz.com/archives/2008/09/13-194555.phpメインインデックスとは別に 1 ~ 5 ページ分のコンテンツ部分のみのファイルを作成します。これは WriteToFile プラグインで実現できます。
後はスムーススクロール後、クリックページのファイルを AJax を使って所定の場所に表示します。
こんばんは。
仕事が忙しくなって、返事が大変、遅くなってしまって申し訳ないです。
ありがとうございます。
頑張ってチャレンジしてみます。
一つ、わからないのが、スクロールしてからページを切り替える、このタイミングの動作は
Ajaxでやってるんでしょうか。
あと、config.yamlファイルについて質問なのですが、TeraPadで上書き保存(何の変更も加えず)してアップすると
CODE INCOMPLETE とエラーが出ちゃいます。改行コードをいろいろ変えてみたけど、駄目でした。
config,yamlをオリジナルにさしかえてアップすると、正常に表示されます。
config.yamlをいじりたいので、どうやって保存したら、いいんでしょうか?
宜しくお願いします。
>>3 hiro さん
こんばんわ^^
師走ですからね
わたしも最近忘年会やら飲み会やらで忙しい!? 毎日です
> 一つ、わからないのが、スクロールしてからページを切り替える、このタイミングの動作は
> Ajaxでやってるんでしょうか。
はい。
スクロールが完了したら Ajax で任意のページ読込み・・・ってかんじです。
hiro さんのサイトでは jQuery をお使いですか!? サンプルお作りしましょうか!?
> config.yamlをいじりたいので、どうやって保存したら、いいんでしょうか?
考えられることは、
- タグを使ってませんか!?
- セクションの末尾にコロン( : )はありますか!?
- お使いの MT の文字コードに依存するのかも。
手っ取り早く、サイドバーにある Contact Me のメアド宛てに hiro さんが作った config.yaml を送って頂ければ添削しますよYAML ではインデントなどにタブを使えないんです。必ずスペースでインデントする必要があります。
コロンがないとエラーするかもです。
ちょとこれは自信ないですが、わたしのサイトでは UTF-8 なのでファイルもすべて UTF-8 で保存するよう気をつけてます。
bzbellさん、
こんにちは。
サンプルを作っていただけるんですか、ありがとうございます。
現在、bzbellさんのテンプレートを使っているんですけど、勉強のため、新たに、サイトを立ち上げ、
テンプレートから自作しようと企てています。
こちらの、テンプレートを改造した方が早いのかなと思ったけど、bzbellさんのCSSはなかなか、理解しづらくて・・・
そこで、思い切って、勉強のため、自作しちゃえ!ということになった次第です。
デザインはオリジナル、中身はほとんど、bzbellさんのものを流用?
ということで、こちらの、テンプレートセットの作り方や、小粋空間さんのパーフェクトガイドを参考にして
とりあえず、テンプレートセットをデフォルトで作ったのですが、ひょんなことで、config.yamlをteraPadで
上書きしてアップしたら、エラーがでちゃったんです。そこで、試しに、bzbellさんのテンプレートでも、config.yamlをTearPadで上書きしたら、エラーになります。オリジナルをアップすると、正常に表示されます。
だから、FTPは問題ないと思うので、TeraPadの設定に問題があるのでしょうか。
ちなみに、TearPadの設定は
文字コードの設定で
文字/改行コードを自動認識する
再読込は現在の文字コードで行う
上記、2つとも、チェックをいれ、
初期文字コード・・・UTF-8 初期改行コード・・・LF
保存文字コード・・・UTF-8 保存改行コード・・・LF
です。
改行コードをいろいろ、組み合わせてみたけど、駄目でした。
なんででしょうね。
といあえず、1回、メールでconfig.yamlを送ります。
宜しくお願いします。
>>5 hiro さん
えっ!! わたしの CSS ムズかしいですか
分かりやすく書けるよう努力します
先ほど hiro さん宅に、わたしの方で変換した config.yaml をお送りしました。
原因は BOM 付きのファイルになってたことが原因です。
TeraPad というエディタは使ってないので分からないのですが、BOM あり/なしでファイル保存可能なエディタなんだと思います。
Windows のメモ帳などはこのような機能はついてません。
また、BOM 対応は必須ではないので未対応なソフトが多いそうです。
MT もそのソフトウェアの一つになりますかね。なので、今後は BOM なしでファイル保存されるといいですよ
>>5 hiro さん
サンプルの件ですが、hiro さんが作成されたテンプレートセット一式をメルして頂ければ、インデックステンプレートをカスタマイズしてあげます。
そのファイルを見比べれば修正箇所など分かりやすいかと思います
bzbellさん、
こんにちは。
ファイルありがとうございます。
そのまま、アップしたら、エラーなく無事表示されました。
でも、BOMってはじめて聞きました。TeraPadで調べたのですが、どこで、その設定をすれば
いいのかわかりませんでした。
そこで、bzbellさんは何を使っているか教えて頂けますか?
それを使って、再度、テンプレートを保存してみようと思います。
あと、僕のテンプレートセットを送る前に、testしておこうと思って、テンプレートを切り替えて、
再構築したら、案の定、エラーになっちゃいました。
エラーになった、ブログ記事のテンプレートをみたら、
1行目が
?
となってました。文字化けですね。BOMの影響でしょうか。
あと、
テンプレート「ブログ記事」の再構築中にエラーが発生しました: タグでエラーがありました: 「Header」というモジュールテンプレートが見つかりませんでした。
というエラーです。これも関係あるのかな?
とりあえず、テンプレート1式送りますので、宜しくお願いします。
>>8 hiro さん
こんばんわ^^
> そのまま、アップしたら、エラーなく無事表示されました。
良かったですね
わたしは有料のエディタを使ってます。「秀丸」っていうの。
周りがみんなそのエディタを使っててオススメされたので購入しちゃいましたの。
> 1行目が ? 文字化けですね。BOMの影響でしょうか。
詳しくは調べてみないと分かりませんがその可能性ありかもです。
> 「Header」というモジュールテンプレートが見つかりませんでした。
> というエラーです。これも関係あるのかな?
ローカライズってご存知でしょうか。
具体的にはプラグインのフォルダ中に lib/L10N/ というフォルダがあります。その中に ja.pm という日本語変換ファイルがあるのですが、hiro さんはこのファイルをイジってますか!?
仮にイジって場合、記述ミスがあると本来「Header」という英字を「ヘッダー」に変換されるのですが、その変換がされなくなってしまいますのでご注意ください。
> とりあえず、テンプレート1式送りますので、宜しくお願いします。
あれっ!? もぅいいんですの
!?
ページング処理のカスタマイズを行うと、大きくテンプレートを変更する必要があるので、とりあえず完成してからの方が良いように思いますよ
こんばんは。
秀丸ですか。
昔から有名ですね。
あれから、調べて、TeraPadでもできることがわかりました。
これから、全てのテンプレートをBOMなしで保存し直して、完成させてから、
また、ご連絡しますね。
そのときはまた、宜しくお願いします。
>>10 hiro さん
> これから、全てのテンプレートをBOMなしで保存し直して、完成させてから、
> また、ご連絡しますね。
はい。がんばってステキなテンプレ作ってくださ~い
こんばんは。
明けましておめでとうございます。
昨年はいろいろと教えて頂いて、ありがとうございます。
また、今年も宜しくおねがいします。
やっと、テンプレが完成しました。ファイルを送ってもよろしいですか?
また、ひとつ、お聞きしたいんですが、テンプレートでサイドバーにウィジエットを予め、セットするのは
どうすればいいんでしょうか。
宜しくお願いします。
>>12 hiro さん
こんばんわ^^
明けましておめでとうございます。
本年もよろしくお願いします
> やっと、テンプレが完成しました。ファイルを送ってもよろしいですか?
はい。テンプレート一式を圧縮したファイルを右上のメールフォームから添付して送ってください。折り返しカスタマイズしたものをお送りします。
hiro さんとこのサイトでは JavaScript に何を使ってますか!? prototype!? jQuery!?
お久しぶりです!(^^)!
またまた・・トラブル発生しました。^^;
ライブラリー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にリネームでは、ダメですよね。
お忙しとこと申し訳ございませんが宜しくお願いします。
>>14 haru さん
こんばんわ^^
先ほど確認したところ、FoldNavigation というのが見つからない…という JavaScript エラーが発生しています。それが原因の可能性があります。
あと、ブログページにおいて now_date というセレクタがないようです。
それによる JavaScript エラーも発生しているようです。
ご確認ください
ありがとうございます。^^;
FoldNavigation ・now_date って
なんですか??
すみません。
ぜんぜん詳しくわからなくて (>_
>>16 haru さん
こんばんわ^^
haru さんは FoldNavigation や now_date を使ってるという認識がないわけですね。
要するに、それでしたら、サイト作成者さまにご相談した方がよいかと思います。
- prototype と jQuery を混在して使ってます。
- 以前ロードしていた JavaScript を今はロードしていません。それによるエラーが発生してます。
大まかに言うとこんなかんじなのですが分かりますでしょうかお返事ありがとうございます。(^_^.)
そうですか・・
業者さんも直せないみたいですね。(>_ MTサイトを管理してくれいいる訳でなくて
設置のみやってもらっているだけですから
結構・・重症ですか。
>>18 haru さん
>>15 のエラーが原因で shadowbox が使えなくなったのか、必ずしも言い切れません
ですが JavaScript エラーは何れにしても対処しておいた方がよいですね
> 業者さんも直せないみたいですね。
そいうことですか。 たとえば、- haru さんはわたしが伝えたキーワードを元に、原因と思わしきテンプレートを探すことはできますか!?
- わたしが指摘したコードを削除 or 追加などすることができますか!?
それが可能でしたら何とか対応できるかもしれませんねありがとうございます。!(^^)!
是非 お願いします。
書き換えは、できると思うんですけど・・
MTは、書き間違えると・・ローカル見たいに
戻す事が出来ないので・・・心配です。
一度お問い合わせで、連絡させて頂いてもいいですか。
>>20 haru さん
右上にある「Contact Me」のバナーをクリックするとメールフォームが表示されますのでご利用ください。
一応誤解のないように言っておきますと、わたしは基本シロウトです。
本業で WEB 業界に携わってるわけではなく、あくまでもプライベートでサポートさせて頂いてるだけでして業務経験はありません。
そこら辺ご承知おきください
あと、haru さんの手元にありますテンプレート( ファイル )一式を見せることが可能でしたら、わたしの方で修正してお渡しするのが一番手っ取り早いかと
その際には「Contact Me」からファイルをアップロードして頂けたらと思います。