category
サイト構築 -JavaScript

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

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

以前、紹介した「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ページに修正を加えることなく動作させることも可能です。

スクリプトの概要

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

使用には「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
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-306.js (5.0KB)
jquery-1.3.2.min.js (55.9KB)
デモファイルを含む一式
page-scroller-306.zip (43.7KB)
Prototypeの「$」と共存可能な「$j」を使用している版
ver3.0.6以降の「$j」版の開発は終了しました。
旧版(jQuery 1.2.6対応)
jquery.page-scroller-304.js (5.0KB)
旧版(jQuery 1.2.6対応、$j使用)
jquery.page-scroller-303.js (5.0KB)

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

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

必要なファイル

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

スクリプトの使い方

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

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

リンク先の記述
ページの先頭に下記を記述
<a id="top"></a>
リンク元の記述
<a href="#top">Top of Page</a>
  1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

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

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

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

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

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

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

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

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

リンク先の記述
<p id="h2-01">h2-01</p>
リンク元の記述
<a href="#h2-01">h2-01に移動</a>
  1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

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

  2. スクロールさせたい要素にidを記述します。
  3. リンク先には、同じ「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>
  1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

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

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

  3. スクロールさせたい要素にidを記述します。
  4. リンク先には、同じ「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>
  1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

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

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

  3. スクロールさせたい要素にidを記述します。
  4. リンク先には、同じ「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>
  1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。

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

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

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

※「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. リンクの記述は、下記のようにします。

    「?pSc」の後に、idを記述します(ここでは「h2-01」)。
    「pSc」はスクロールを起動するサインで、スクリプト内の「callExternal = “pSc”」を変更することで自由な文字列に変更できます。
    ※onclickだけでなく、onkeypressなどと合わせて記述することをお勧めします。

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

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

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

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

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

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

Post on:2007年8月20日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

«12...789101112»
kee
on 2009年5月24日

コリス様、ご返答有難うございます。

どうやらエントリー側のグリッドに”position: relative;”を記述していたのが原因だったようです。
Firefox3.0.10、Safari3.2.3および、Safari4で動作を確認いたしました。

お手数をお掛けして申し訳ありませんでした。

コリス
on 2009年5月25日

> kee さん

問題が解決したようなので、
よかったです :-)

hatena
on 2009年6月10日

このスクリプト、大変、気に入りました。さっそくMyブログに導入させていただきました。
勝手ながら、紹介記事も書かせていただき、リンクも張らせていただきました。
http://hatenachips.blog34.fc2.com/blog-entry-112.html
もしご不都合があればお知らせください。

また、トラックバックも送らせていただきました。

コリス
on 2009年6月10日

> hatena さん

気に入っていただけて、よかったです。
紹介記事もありがとうございました。

tkr
on 2009年6月11日

難読化されていないバージョンは公開していただけないのでしょうか。
是非ご検討ください。

コリス
on 2009年6月11日

> tkr さん

難読化されていないバージョンは有償にて利用可なので、別途「お問い合わせ」よりご連絡ください。

無償版での公開予定はありません。

«12...789101112»

ページの先頭へ




© coliss

RSS