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

Post on:2007年8月20日

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

追記：

2013年10月26日
ver.3.0.9をリリース
jQueryの旧版によるXSSに対応しました。
2011年5月4日
デモおよびダウンロードファイルをjQuery1.6に変更しました。
2011年1月31日
ver.3.0.8をリリース
機能を追加しました。
2010年11月19日
ver.3.0.7をリリース
ライセンスを変更しました。
2010年11月17日
デモおよびダウンロードファイルをjQuery1.4.4に変更しました。
2010年9月19日
デモおよびダウンロードファイルをjQuery1.4.2に変更しました。
2009年7月6日
対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。
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ページに修正を加えることなく動作させることも可能です。

スクリプトの概要

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

使用には「jQuery」が必要です。デモページではjquery-1.6.min.jsを使用しています。
※jQuery 1.2.6以下対応版の開発は終了。

動作環境

Win
IE6/7/8/9, Firefox, Opera, Safari, Chrome
Mac
Safari, Firefox

使用条件

スクリプトのライセンス
表示 - 継承 2.1 日本

上記のライセンスに従い、個人でも商用でも無料で利用が可能です。
スクリプト内のクレジットは削除しないでください。
※サイト内にクレジットを別途、明記する必要はありません。

再配布の場合は同条件に限り可能です。その際は、当方のクレジットを別途明記してください。
制作会社が納品物の一部とする場合は、クレジットを明らかにして納品してください。

サポートとカスタマイズ

サポートおよびカスタマイズは有償になります。
ライセンス取得済みの場合は従来の通り、サポート・カスタマイズは無償です。
詳しくは、「contact」からお問い合わせください。

注意

商用利用も無料なのは3.0.7以降になります。そのため、3.0.6以下の商用利用は有償になります。

更新履歴

3.0.9
  • jQueryの旧版によるXSSの問題に対処しました。
  • 対処（<, >などの文字列のサニタイズ）
3.0.8
  • スピードの調整が可能になりました。
  • 動作しないエリアを指定できるようになりました。
  • area要素を使用したイメージマップでも利用できるようになりました。
  • 詳細は、更新情報- 3.0.8をご覧ください。
3.0.7
  • ライセンスが変わりました。
  • 詳細は、更新情報- 3.0.7をご覧ください。
3.0.6
  • スピードの調整をしました。
  • 他のjQueryのプラグインとの最適化をしました。
  • $j版の配布を終了しました。
  • 詳細は、更新情報- 3.0.6をご覧ください。
3.0.5
3.0.4
  • $jから「$」に変更しました。
  • 詳細は、更新情報- 3.0.4をご覧ください。
3.0.3
3.0.2
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-309.js (5KB)
jquery-1.6.min.js (88KB)
デモファイルを含む一式
page-scroller-309.zip (60KB)
Prototypeの「$」と共存可能な「$j」を使用している版
「$j」版の開発は終了しました。
旧版（jQuery 1.2.6対応）
jQuery1.2.6以下対応版の配付は終了しました。

[ad#ad-2]

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

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

必要なファイル

  • jquery.page-scroller.js
    (jquery.page-scroller-309.js)
  • jquery.js
    (jquery-1.3.min.js～jquery-1.6.min.js)
  • HTMLファイル

スクリプトの使い方

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

ページの下部にある「Top of Page」をクリックすると、ページの先頭へスクロールします。

リンク先の記述
ページの先頭に下記を記述
<a id="top"></a>
リンク元の記述
<a href="#top">Top of Page</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. ページの先頭の要素にidを記述します。 
    <a id="top"></a>
  3. ページの先頭へ移動させる箇所に、下記のように記述します。 
    <a href="#top">Top of Page</a>
  • 3.0.8から、area要素にも対応しました。
  • 一部のブラウザでは、「#top=ページの先頭」を拡張機能として実装していますが、本スクリプトではそれに依存していません。

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

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

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

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

「h2-01に移動」をクリックすると、「h2-01」にスクロールします。

リンク先の記述
<p id="h2-01">h2-01</p>
リンク元の記述
<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. スクロールさせたい要素にidを記述します。 
    <p id="h2-01">h2-01</p> 
  3. リンク先には、同じ「id」を記述します。 
    <a href="#h2-01">h2-01に移動</a>

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

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

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

スクロール先の地点を微調整をする方法

「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>
  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>

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

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

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

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

「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>
  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"無しでページの先頭にスクロール

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>
  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」にリンクを設定するのはおかしいので、記述することをお勧めします。

「id="top"」有りで、virtualTop = 1
demo 8に「id="top"」を記入

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

「id」を「top」以外で機能させる設定
demo 7にidを「pageTop」で設定
設定の記述
<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>
  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」を変更することにより、時間を変更することができます。

スクロールのスピードを調整する方法

スクロールのスピードを調整できるオプションです。

スクロールのスピードを調整

スクロールのスピードを調整する方法

スクロールのスピードを任意に変更することができます。
※デモはスピードを速くしています。

設定の記述
<script type="text/javascript">
adjSpeed = .5;
</script>
設定する数値
速くする場合は数値を少なく（例：0.5）、
遅くする場合は数値を多く（例：1.5）してください。
基準値：1

動作しないエリアを設定する方法

ページスクロールが動作しないエリアを設定できるオプションです。
これにより、#リンクでタブを切り替えるコンテンツなどと併用することが可能です。

動作しないエリアを設定

動作しないエリアを設定する方法

ページスクロールが動作しないエリアを設定できます。

リンク先の記述
<p id="h2-01">h2-01</p>
リンク元の記述
<a href="#h2-01" class="nopscr">h2-01に移動</a>（除外対象）
  1. リンクの記述は、下記のようにします。 
    <a href="#h2-01" class="nopscr">h2-01に移動</a>（除外対象）

    a要素に「class="nopscr"」を追加します。
    適用箇所はa要素だけでなく、div要素に追加し内包箇所に適用することもできます。デモページでは、タブコンテンツを内包するdiv要素にも追加し、タブコンテンツ全てでページスクロールを無効化しています。
    ※タブのコンテンツ箇所だけを有効化したい場合は、タブのみに設定してください。

sponsors

top of page

©2024 coliss