[JS]Page Scrollerと他のjQueryプラグインとの実装サンプル

当サイトで配布している「簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3」と他のjQueryプラグインとの実装サンプルの紹介です。

Smart Floating Banners

パネルがスクロールに追随して表示されます。
配布元:Smart Floating Banners

デモのキャプチャ

Smart Floating Banners

ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。
パネル上の「Top of Page」は、Page Scrollerの挙動です。

Tips:
フロートするパネルは画像など実体がある方がベターです。
サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。

jQuery Footnotes

脚注を抽出し指定箇所に配置します。相互リンクは自動生成。
配布元:jQuery Footnotes

デモのキャプチャ

jFootnotes

span内のテキスト、blockquoteのtitle内のテキストを抽出し、指定箇所にリスト要素でナンバリングして脚注を配置します。
脚注に戻るリンクもありますが、デフォルトだと視認性が低いと思います。

Tips:
外部スクリプトの記述の順番は、jFootnotesの後に、Page Scrollerを記述してください。
リンクの生成後でないと、Page Scrollerは動作しません。

jBreadCrumb

同じようなモーションで動作するパンくず。
配布元:jBreadCrumb

デモのキャプチャ

jBreadCrumb

スクリプト同士に協力している箇所はありませんが、一緒に設置すると動作しなかったため、Page Scrollerを修正しました。

Tips:
jBreadCrumbの実装には、下の空divを忘れないように。
追記:
jBreadCrumbの外部ファイルの記述の順番は、スタイルシートの後にスクリプトを記述しないとOpera, Safariで動作しませんでした。

sponsors

top of page

©2018 coliss