[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3

以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。

追記：

2009年2月23日

ver.3.0.6をリリース

デモ、ダウンロードのjQuery 1.3.1を1.3.2に変更しました。

他のjQueryプラグインとの実装サンプルを公開しました。

2009年1月22日

デモ、ダウンロードのjQuery 1.3を1.3.1に変更しました。

2009年1月15日

ver.3.0.5をリリース

デモ、記述例をjQuery 1.2.6から1.3に変更しました。

2009年1月14日

ver.3.0.4をリリース

デモ、記述例をjQuery 1.2.2から1.2.6に変更しました。
※1.2.2でも支障はないと思います。

2008年8月16日

jQuery 1.2.6でのテストページを設置しました。
※問題無く動作しています。

2008年1月31日

ver.3.0.3をリリース

2008年1月25日

ver.3.0.2をリリース

2007年12月26日

ver.3.0.1をリリース

ver.3.xから、簡単にスクリプトの設置が可能になりました。
外部スクリプトとして指定するだけで、HTMLページに修正を加えることなく動作させることも可能です。

• スクリプトの概要
• 更新履歴
• JSファイルのダウンロード
• ページの先頭へスムーズにスクロールさせる方法
• ページ内の任意の場所にスムーズにスクロールさせる方法
• スクロール先の地点をピクセル単位で調整する方法
• 横移動有りでスムーズにスクロールさせる方法
• id="top"無しでスムーズにスクロールさせる方法
• 外部ページのリンクからスムーズにスクロールさせる方法
• 他のjQueryプラグインとの実装サンプル集

スクリプトの概要

ページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトです。

使用には「jQuery」が必要です。demoではjquery-1.3.2.min.jsを使用しています。
jQuery 1.2.6以下は、ver.3.0.4をご利用ください。
※jQuery 1.2.6以下対応版の開発は終了。

動作環境

Win

IE6/7, Firefox1.5/2/3, Opera9/9.6, Safari3, Chrome1

Mac

Safari2, Firefox1.5/2/3

使用条件

本スクリプトは、非商用利用に限りフリーで使用することができます。詳しくは「表示 - 非営利 - 継承 2.1 日本」を参照ください。

商用利用の場合は有償です。
contactのフォーム、もしくはメールにてお問い合わせください。
contact

更新履歴

3.0.6

• スピードの調整をしました。
• 他のjQueryのプラグインとの最適化をしました。
• $j版の配布を終了しました。
• 詳細は、更新情報- 3.0.6をご覧ください。

3.0.5

• jQuery 1.3に対応しました。
• 詳細は、更新情報- 3.0.5をご覧ください。

3.0.4

• $jから「$」に変更しました。
• 詳細は、更新情報- 3.0.4をご覧ください。

3.0.3

• jQuery 1.2.6の動作検証のためデモページを設置しました。
• Firefoxにて、外部ページのリンクからのスクロールにバグがあったので対応しました(demo 10)。

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ファイルのダウンロード

ページの先頭へスムーズにスクロールさせる方法

ページの先頭へ減速しながらスムーズにスクロールさせる方法です。

必要なファイル

• jquery.page-scroller.js
  (jquery.page-scroller-306.js)
• jquery.js
  (jquery-1.3.2.min.js)
• HTMLファイル

スクリプトの使い方

1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

   <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>
   

   ※jQueryは必ず先に記述してください。

2. ページの先頭の要素にidを記述します。

   <a id="top"></a>
   

3. ページの先頭へ移動させる箇所に、下記のように記述します。

   <a href="#top">Top of Page</a>
   

※一部のブラウザでは、「#top=ページの先頭」を拡張機能として実装していますが、本スクリプトではそれに依存していません。

ページ内の任意の場所にスムーズにスクロールさせる方法

ページの任意の場所へ減速しながらスムーズにスクロールさせる方法です。

スクリプトの使い方：ページの任意の場所にスクロール

1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

   <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>
   

   ※jQueryは必ず先に記述してください。

2. スクロールさせたい要素にidを記述します。

   <p id="h2-01">h2-01</p> 
   

3. リンク先には、同じ「id」を記述します。

   <a href="#h2-01">h2-01に移動</a>
   

スクロール先の地点をピクセル単位で調整する方法

スクロール先の地点をピクセル単位で自由に調整することができるオプションです。

スクリプトの使い方：スクロール先の地点を微調整

1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

   <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>
   

   ※jQueryは必ず先に記述してください。

2. script 内に設定を記述します。
   「adjPosition」に調整したいピクセルを指定します。
   マイナスを指定すると、指定した場所の上にスクロールします。
   設定は、個別にHTMLファイル、一括にJSファイルに記述しても動作します。

   <script type="text/javascript">
   adjPosition = -30;
   </script>
   

3. スクロールさせたい要素にidを記述します。

   <p id="h2-01">h2-01</p>
   

4. リンク先には、同じ「id」を記述します。

   
   <a href="#h2-01">h2-01に移動</a>
   

横移動有りでスムーズにスクロールさせる方法

任意の場所に縦横にスムーズにスクロールさせるオプションです。

スクリプトの使い方：横移動有りでスクロール

1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

   <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>
   

   ※jQueryは必ず先に記述してください。

2. script 内に設定を記述します。
   「adjTraverser=1」は、横移動有り。
   「adjTraverser=0」は、横移動有りですが左0pxに固定。
   「adjTraverser無し」は、クリックした地点から横移動無しで垂直に移動。
   設定は、個別にHTMLファイル、一括にJSファイルに記述しても動作します。

   <script type="text/javascript">
   adjTraverser = 1;
   </script>
   

3. スクロールさせたい要素にidを記述します。

   <p id="h2-01">h2-01</p>
   

4. リンク先には、同じ「id」を記述します。

   <a href="#h2-01">h2-01に移動</a>
   

id="top"無しでスムーズにスクロールさせる方法

id="top"の記述無しで、ページの先頭へスクロールさせるオプションです。

スクリプトの使い方：id="top"無しでページの先頭にスクロール

1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

   <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>
   

   ※jQueryは必ず先に記述してください。

2. script 内に設定を記述します。
   「virtualTop=0」は、常に0,0 の座標に移動。
   「virtualTop=1」は、水平位置はそのままで、ページの最上部に移動。
   設定は、個別にHTMLファイル、一括にJSファイルに記述しても動作します。

   <script type="text/javascript">
   virtualTop = 0;
   </script>
   

3. ページの先頭に「id="top"」を記述する必要はありません。
4. ページの先頭へ移動させる箇所に、下記のように記述します。

   <a href="#top">Top of Page</a>
   

※「id="top"」が存在しなくても動作しますが、存在しない「#top」にリンクを設定するのはおかしいので、記述することをお勧めします。

「virtualTop」の機能は、「id」が「top」でなくても動作します。

外部ページのリンクからスムーズにスクロールさせる方法

外部ページのリンクからでも、スムーズにスクロールできるオプションです。

外部ページのリンクからスクロール

1. リンクの記述は、下記のようにします。

   <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などと合わせて記述することをお勧めします。

2. リンク先のページに、外部スクリプトとして参照させます。

   <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>
   

   ※jQueryは必ず先に記述してください。

3. リンク先のページのスクロールさせたい要素にidを記述します。

   <h2 id="h2-01">h2-01</h2>
   
   

4. ページのロードが完了してから、スクロールが起動するまでの時間は、初期設定で「200」になっています。
   スクリプト内の「delayExternal= 200」を変更することにより、時間を変更することができます。

他のjQueryプラグインとの実装サンプル集

• Smart Floating Banners
  パネルがスクロールに追随して表示されます。
• jFootnotes
  脚注を抽出し指定箇所に配置します。
• jBreadCrumb
  同じようなモーションで動作するパンくず。

解説は下記ページにて。
Page Scrollerと他のjQueryプラグインとの実装サンプル

Post on:2007年8月20日