当サイトで配布している「簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3」と他のjQueryプラグインとの実装サンプルの紹介です。
Smart Floating Banners
パネルがスクロールに追随して表示されます。
配布元：Smart Floating Banners
ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。
パネル上の「Top of Page」は、Page Scrollerの挙動です。
- Tips:
- フロートするパネルは画像など実体がある方がベターです。
サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。
jQuery Footnotes
脚注を抽出し指定箇所に配置します。相互リンクは自動生成。
配布元：jQuery Footnotes
span内のテキスト、blockquoteのtitle内のテキストを抽出し、指定箇所にリスト要素でナンバリングして脚注を配置します。
脚注に戻るリンクもありますが、デフォルトだと視認性が低いと思います。
- Tips:
- 外部スクリプトの記述の順番は、jFootnotesの後に、Page Scrollerを記述してください。
リンクの生成後でないと、Page Scrollerは動作しません。
jBreadCrumb
同じようなモーションで動作するパンくず。
配布元：jBreadCrumb
スクリプト同士に協力している箇所はありませんが、一緒に設置すると動作しなかったため、Page Scrollerを修正しました。
- Tips:
- jBreadCrumbの実装には、下の空divを忘れないように。
- 追記：
jBreadCrumbの外部ファイルの記述の順番は、スタイルシートの後にスクリプトを記述しないとOpera, Safariで動作しませんでした。
Post on:2009年2月23日
こんにちは。いつも新鮮で為になる情報ありがとうございます。
ところで当方のMac Safari ver 3.2.1、Opera Ver 9.51ですと、jBreadCrumbのパン屑が正常に作動しませんでした。firefox Ver 3.0.6では問題ありません。 御確認いただければ幸いです。 またコメント欄には掲載いただかなくて結構です。これからも楽しく拝見させて戴きます。では、お邪魔いたしました。(^^)
> nabe さん
ご報告、ありがとうございます。
Win XPでも動かないですね、、、
何でだろう。
ちょっと検証してみます。
Safari, Opera で動作しない件、Win XPで対応しました。
原因は、jBreadCrumbの外部ファイルの順番でした。
（ローカルだと動作するのが不思議）。
MacのSafari, Operaは環境が無いため、どなたかよろしければ、コメントおまちしております。
わー！jBreadCrumbが動いています！
ありがとうございました。
これからも頑張ってください～。
> とろろ さん
いえいえ、こちらこそ、
今後ともゴヒイキにお願いします。
たびたびお邪魔します。jBreadCrumbですが、Operaでは問題ありませんでした。Safariでは読み込み時は正常に作動しますが、リンク移動しブラウザで戻ると正常に作動しません。 ちなみにjBreadCrumbからダウンロードしたファイルを基に、スクリプト等を、colissさんの絶対パスに書き換えて、ファイルにPage Scrollerを追加してもすべて正常に機能しますので、サンプルの原因はわかりませんが特に問題は無いと思っております。 長文で失礼いたしました。(^^)
> nabe さん
度々、本当にありがとうございます。
Safari 3.2.1 for Macだと、ダメですか、、、
Safari 3.2.2 for Winだと大丈夫なのですが、元サイトのは平気ということで、設置方法に問題あるってことですね。
機会があった時にでも、改めて検証してみます。
また、もし原因が特定できた方は、ご一報よろしくお願いします。