以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。
追記：
- 2008年1月31日
- ver.3.0.3をリリース
- 2008年1月25日
- ver.3.0.2をリリース
- 2007年12月26日
- ver.3.0.1をリリース
今回のバージョンから、簡単にスクリプトの設置が可能になりました。
外部スクリプトとして指定するだけで、HTMLページに修正を加えることなく動作させることも可能です。
- スクリプトの概要
- 更新履歴
- JSファイルのダウンロード
- ページの先頭へスムーズにスクロールさせる方法
- ページ内の任意の場所にスムーズにスクロールさせる方法
- スクロール先の地点をピクセル単位で調整する方法
- 横移動有りでスムーズにスクロールさせる方法
- id="top"無しでスムーズにスクロールさせる方法
- 外部ページのリンクからスムーズにスクロールさせる方法
スクリプトの概要
ページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトです。
使用には「jQuery」が必要です。demoではjquery-1.2.1.min.jsを使用しています。
prototype.jsなどと共存できるように「$」ではなく「$j」を使用しています。
動作環境
- Win
- IE6, IE7, Firefox1.5, Firefox2, Opera9, Netscape8, Netscape9b, Safari3b
- Mac
- Safari2, Firefox1.5, Firefox2
使用条件
本スクリプトは、非商用利用に限りフリーで使用することができます。詳しくは「表示 - 非営利 - 継承 2.1 日本」を参照ください。
商用利用の場合は、contactのフォーム、もしくはメールにてお問い合わせください。
contact
更新履歴
- 3.0.3
- 3.0.2
-
- jQuery 1.2.2に対応しました。
- 外部ページのリンクからのスクロールに対応しました(demo 10)。
- 3.0.1
-
- スクロール中のマウスのクリックに対して、スクロール動作が止まるようにしました。
- スクロール中の別のアンカーへのクリックに対して、スクロール動作が止まるようにしました。
- jQuery 1.2.1に対応しました。
- ファイル名を「page-scroller.js」から「jquery.page-scroller.js」に変更しました。
実際に使用する際は、どちらのファイル名を使用しても問題ありません。
- 3.0.0
-
- jQuery 1.1.3.1に対応しました。
JSファイルのダウンロード
- script
- jquery.page-scroller-303.js (5.0KB)
- jquery-1.2.2.min.js(51.4KB)
- demo
- page-scroller-303.zip (38.4KB)
ページの先頭へスムーズにスクロールさせる方法
ページの先頭へ減速しながらスムーズにスクロールさせる方法です。
必要なファイル
- jquery.page-scroller.js
(jquery.page-scroller-303.js) - jquery-1.2.2.min.js
- HTMLファイル
スクリプトの使い方
ページの先頭へスムーズにスクロールさせる方法
ページの下部にある「Top of Page」をクリックすると、ページの先頭へスクロールします。
- リンク先の記述
- ページの先頭に下記を記述
<a id="top"></a> - リンク元の記述
- <a href="#top">Top of Page</a>
- スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
※jQueryは必ず先に記述してください。
- ページの先頭の要素にidを記述します。
- ページの先頭へ移動させる箇所に、下記のように記述します。
※一部のブラウザでは、「#top=ページの先頭」を拡張機能として実装していますが、本スクリプトではそれに依存していません。
ページ内の任意の場所にスムーズにスクロールさせる方法
ページの任意の場所へ減速しながらスムーズにスクロールさせる方法です。
スクリプトの使い方：ページの任意の場所にスクロール
ページ内の任意の場所にスクロールさせる方法
「h2-01に移動」をクリックすると、「h2-01」にスクロールします。
- リンク先の記述
- <p id="h2-01">h2-01</p>
- リンク元の記述
- <a href="#h2-01">h2-01に移動</a>
- スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
※jQueryは必ず先に記述してください。
- スクロールさせたい要素にidを記述します。
- リンク先には、同じ「id」を記述します。
スクロール先の地点をピクセル単位で調整する方法
スクロール先の地点をピクセル単位で自由に調整することができるオプションです。
スクリプトの使い方：スクロール先の地点を微調整
スクロール先の地点を微調整をする方法
「h2-01に移動」をクリックすると、「h2-01」の-30pxの地点にスクロールします。
- 設定の記述
- <script type="text/javascript">
adjPosition = -30;
</script> - リンク先の記述
- <p id="h2-01">h2-01</p>
- リンク元の記述
- <a href="#h2-01">h2-01に移動</a>
- スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
※jQueryは必ず先に記述してください。
- script 内に設定を記述します。
「adjPosition」に調整したいピクセルを指定します。
マイナスを指定すると、指定した場所の上にスクロールします。
設定は、個別にHTMLファイル、一括にJSファイルに記述しても動作します。 - スクロールさせたい要素にidを記述します。
- リンク先には、同じ「id」を記述します。
横移動有りでスムーズにスクロールさせる方法
任意の場所に縦横にスムーズにスクロールさせるオプションです。
スクリプトの使い方：横移動有りでスクロール
横移動有りでスクロールさせる方法
「h2-01に移動」「h2-02に移動」をクリックすると、それぞれ横移動有り・無しでスクロールします。
- adjTraverser = 1
- 横移動有り。
- 横移動有り。縦無し。
- adjTraverser = 0
- 横移動有り、左0pxに固定。
- no adjTraverser
- adjTraverserの設定が無い場合は、横移動無しで垂直にスクロール。
- 設定の記述
- <script type="text/javascript">
adjTraverser = 1;
</script> - リンク先の記述
- <p id="h2-01">h2-01</p>
- リンク元の記述
- <a href="#h2-01">h2-01に移動</a>
- スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
※jQueryは必ず先に記述してください。
- script 内に設定を記述します。
「adjTraverser=1」は、横移動有り。
「adjTraverser=0」は、横移動有りですが左0pxに固定。
「adjTraverser無し」は、クリックした地点から横移動無しで垂直に移動。
設定は、個別にHTMLファイル、一括にJSファイルに記述しても動作します。 - スクロールさせたい要素にidを記述します。
- リンク先には、同じ「id」を記述します。
id="top"無しでスムーズにスクロールさせる方法
id="top"の記述無しで、ページの先頭へスクロールさせるオプションです。
スクリプトの使い方：id="top"無しでページの先頭にスクロール
id="top"の記述無しで、ページの先頭へスクロールさせる方法
「Top of Page」をクリックすると、ページの先頭へスクロールします。
- virtualTop = 0
- 0,0 の座標に移動。
- virtualTop = 1
- 水平位置はそのままで、ページの最上部に移動。
- 設定の記述
- <script type="text/javascript">
virtualTop = 0;
</script> - リンク先の記述
- 「<a id="top"></a>」を記述するは必要ありません。
- リンク元の記述
- <a href="#top">Top of Page</a>
- スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
※jQueryは必ず先に記述してください。
- script 内に設定を記述します。
「virtualTop=0」は、常に0,0 の座標に移動。
「virtualTop=1」は、水平位置はそのままで、ページの最上部に移動。
設定は、個別にHTMLファイル、一括にJSファイルに記述しても動作します。 - ページの先頭に「id="top"」を記述する必要はありません。
- ページの先頭へ移動させる箇所に、下記のように記述します。
※「id="top"」が存在しなくても動作しますが、存在しない「#top」にリンクを設定するのはおかしいので、記述することをお勧めします。
「virtualTop」の機能は、「id」が「top」でなくても動作します。
- 設定の記述
- <script type="text/javascript">
virtualTopId = "pageTop";
</script> - リンク先の記述
- <a id="pageTop"></a>
- リンク元の記述
- <a href="#pageTop">Top of Page</a>
外部ページのリンクからスムーズにスクロールさせる方法
外部ページのリンクからでも、スムーズにスクロールできるオプションです。
外部ページのリンクからスクロール
外部ページのリンクからスクロールさせる方法
外部ページに移動後、「h2-01」にスクロールします。
- 設定の記述
- <script type="text/javascript">
callExternal = “pSc”;
delayExternal= 200
</script> - リンク先の記述
- <p id="h2-01">h2-01</p>
- リンク元の記述
- <a href="demo-10-02.html#h2-01" onclick="location.href='demo-10-02.html?pSch2-01'; return false;">demo-10-02.htmlに移動して、h2-01にスクロール</a>
- リンクの記述は、下記のようにします。
「?pSc」の後に、idを記述します(ここでは「h2-01」)。
「pSc」はスクロールを起動するサインで、スクリプト内の「callExternal = “pSc”」を変更することで自由な文字列に変更できます。
※onclickだけでなく、onkeypressなどと合わせて記述することをお勧めします。 - リンク先のページに、外部スクリプトとして参照させます。
※jQueryは必ず先に記述してください。
- リンク先のページのスクロールさせたい要素にidを記述します。
- ページのロードが完了してから、スクロールが起動するまでの時間は、初期設定で「200」になっています。
スクリプト内の「delayExternal= 200」を変更することにより、時間を変更することができます。
Post on:2007年8月20日