以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。
追記：
- 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ページに修正を加えることなく動作させることも可能です。
- スクリプトの概要
- 更新履歴
- 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/8, Firefox1.5/2/2.5/3, Opera9/9.6, Safari3, Chrome1/2
- 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-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>
- スクリプトを使用する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」を変更することにより、時間を変更することができます。
他のjQueryプラグインとの実装サンプル集
- Smart Floating Banners
パネルがスクロールに追随して表示されます。 - jFootnotes
脚注を抽出し指定箇所に配置します。 - jBreadCrumb
同じようなモーションで動作するパンくず。
解説は下記ページにて。
Page Scrollerと他のjQueryプラグインとの実装サンプル
Post on:2007年8月20日
[web][JavaScript]ページ遷移とユーザビリティ…
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3.00 | コリス コリス ページ内リ (more…)
[...] 応用編DEMO – DOWMLOAD シンプルすぎますね。プラグインの容量も4KBなのでお手軽です。ページスクローラーは利用頻度も高いのでいいですね。 作者さんが日本の方なので驚きました。更に詳しい内容を知りたい方は作者さんのページへどうぞ。 Page Scroller | コリス [...]
jquery.jsとjquery-pack.js違いって何なんでしょうね。。
> ゆーすけさん
下記ページにあるPacker(多分)を使用して、軽量化している版としていない版です。
あと、pack版はコメント等も削除してます。
http://coliss.com/articles/build-websites/operation/javascript/334.html
さっそくご教授頂きありがとうございます！
なるほど！そういうことでしたか。重い・軽い、ソースがわかりにくい・わかりやすいはあるものの一緒のデータなんですね。ソース見てもjquery-pack.jsは汚いなー何やコレぐらいにしか思っていませんでした。。もっと頑張って勉強しないと！
> ゆーすけさん
少しでも容量が軽い方がよいと思うので、軽量化を行っている人も増えてきているようですよ。
i beg you – please make english variant of this page :)
Hi, vike.
Sorry, it is difficult for me to translate all this text.
I introduce this translation machine.
http://babelfish.altavista.com/
When you input this URL, this page will be translated into English.
If you don’t understand partially, please tell me.
はじめまして。 突然すみません。
ぜひ利用させていただこうと思っているのですが、インストラクションどおりにダウンロードしても動きません。
現在なにか不具合等が出ているのでしょうか？
> ぎんじ さん
動作しない環境や実装したページを教えていただけると確認できるのですが、情報が無いため的確なアドバイスができません。
もし、こういった場所に明記するのがまずいようでしたら、フォームやメールにて連絡ください。
※多数の実装歴がありますが、不具合の報告というのは特に受けていません。
見ず知らずの通行人へのご返信、ありがとうございます！ 今朝になって再びパソコンを立ち上げたところ、キレイに動きました・・・先走って質問してしまい、大変申し訳なく思っております。 今思えば、正しく設置すれば簡単に正しく動いてくれる様子。
縦横に動くというのが魅力です。 ありがたく使わせていただきます。
> ぎんじ さん
無事に動作して、よかったです。
はじめまして。
こちらのJacascriptの「使用条件」について質問させてください。
「非商用利用に限りフリー」とのことですが、
仕事で作っているページにこれを使うことはできない
ということでよろしいでしょうか。
認識間違いないでしょうか。
とても有益なので是非使いたいところです。
> 成海 さん
仕事などの商用利用の場合は、フリーでの使用はできません。
別途ご相談を受けていますので、お手数ですが、contactのフォームかメールにてお問い合わせをお願いします。
※上記に明記していなかったので、追記しました。
お早いお返事ありがとうございます。
商用は不可でお金がかかるということですね、了解しました。
ちょっと残念ですが、お金の話をお客さんにすると、「じゃあ、いいです」と言われてしまうのがオチなので、今回の使用は控えますね。
それにしても、とても興味のあることをたくさん書いてらっしゃるので、
久々にヒットしたサイト様でした。
今後も参考にさせてもらいます。
> 成海 さん
すいません。
今後も、よろしくお願いします。
はじめまして、有益なブログですね！
さっそくこのスクリプトを自分のブログに使わせて頂こうと思い、お礼のコメントをさせて頂きました。
優良な情報が多すぎてまだとても見きれていないのですが、今後も勉強させて頂きたいです。よろしくお願いします。
Back Scroll Button…
今更だけどページ上部に戻るためのボタンを追加してみた。ちょうど前回でエントリー… (more…)
いつもタメになる情報、ありがとうございます。
このスクリプトですが、自分のFirefoxだと、
「coliss has no properties」と出てデモページから
動きません。
・・・かなりいろいろアドオン入れているので、
正常な環境ではありませんけども。
> あざらし さん
ありがとうございます。
確かに、Firefoxでは動作しませんでした。
デモページ・圧縮ファイルなど全てに最新版をアップしなおしました。
最速修正していただいて、ありがとうございます！
確かに動作しました。
縦横の動きが美しいですね。
> あざらし さん
確認まで、本当にありがとうございます。
すみませ〜ん ^_^;/scloll…
この Blog JS ファイルなど取り除いて極力軽くしてみました〜などと宣言しておいて、その舌の根も乾かぬ内に、またまた JS ファイルを追加してしまいましたぁでも、ま (more…)
はじめまして！
スクロールのスピードを変更することはできるのでしょうか?
> ななし さん
スクロールのスピードは、変更できますよ。
はじめまして、先ほどデモをまるごとダウンロードしたのですがfirefoxだと正常に表示されるのですがIEだと表示されません。web上のサンプルは通常通り拝見できました。どういう違いがあるのでしょうか？
> mm さん
すいませんが、ご利用のIEの環境(IEのバージョンとOS)を教えていただけますか？
先程、このページからデモファイル一式(page-scroller-303.zip)をダウンロードし、確認したところ、IE7+Windows XPの環境では、問題無く動作しました。
ちなみに、公開しているものとダウンロードできるファイルに違いはありません。
早速のご返答ありがとうございます。環境はIE６で別PCでそれぞれダウンロードしたところ同じ結果でした。web上のものは問題無く作動しています。サイトに組み込んでもみましたがスクロールせずジャンプするだけになっていました。firefoxでは問題なく作動確認ができました。どういう理由でそうなるんでしょう？？
あーっとすいません。ぼーっとしてnameのところに・・・
追記しますとIE6＋xpで、Alertでスクリプトが読めてないとかの確認もしてみましたが正常でした。たびたびすいません。
おそらく、hrefに記述した「#top」などが、スクリプトより先に反応してしまうことが原因だと思います。
ウェブ上では問題無いということと、IE7、Fx2などでは問題無いのを当方の環境で確認しているので、申し訳ありませんが、サポート外とさせていただきます。
以下、参考までに。
その箇所は、jQueryの機能で動作しており、その部分を当スクリプトで対応することは可能ですが、それにより当スクリプトが肥大化してしまうのを避けることを優先にしようと思います。
もし、次回のバージョンでjQuery不要版を作成した際は、対応可能になっていると思います。
>コリスさん
なるほど！ありがとうございます。謎が解けてすっきりです。
> mm さん
また何かありましたら、よろしくお願いします。
初めましてこんにちは。
使わせて頂きました。有難うございます。
DLするファイル名は「jquery.page-scroller-303.js」ですが、「外部スクリプトとして参照させます」の説明部分では「jquery.page-scroller.js」になっていましたので一応お知らせを。
> ハル さん
ご利用、ありがとうございます。
ファイル名の件は間違いではなく、そのようにしています。
直接DLするファイルは、バージョンアップが分かるように数字有り。
使用する場合は、ファイル名を変更する手間がないように数字無し。
その旨、必要なファイルに記載があるので、使用する場合には間違いのないようにお願いします。
外部ページからのスクロールに、スクロール先の地点を微調整を設定したいのですが、巧くいかないのですが・。
adjPosition = -30;
callExternal = “pSc”;のような指定は街が手いますでしゅか
delayExternal= 200
↑すいません、途中で送ってしまいました。
外部ページのリンクからスクロール＋スクロール先の地点を微調整を行うにはどのように記述すればよろしいのでしょうか。
> ops さん
外部リンク＋微調整のデモ（-126pxで指定）をアップしてみました。
外部リンク＋微調整のデモ
記述する箇所は、移動先ページのL.8-10にある「var adjPosition = -126;」の指定です。
delayExternal= 200をdelayExternal= 150ぐらいにするとIEではスクロールの起動を遅く出来るのですがFirefoxでは変化がありませんでした。どうすれば良いでしょうか？お教え下さい。
わざわざサンプルまで作っていただきありがとうございます。
無事地点指定することができました！
> なかにしゆうすけ さん
150で遅くは多分逆だと思うのですが、数が大きいほど遅延します。
50の増減だと、数字の単位が1/1000秒単位のため、あまり体感できないと思います。
体感できるくらい遅くする場合は、「1000」くらいを指定するといいと思います。
※Fx2で確認したところ、500くらいでワンテンポ遅れるくらいに感じました。
※200より速く（小さく）する場合、ページのロードが行えるか充分な検証を行ってください。
変な質問をしてしまってすみません。
できました！ありがとうございます。
> opus さん
うまくいって、よかったです。
>なかにしゆうすけ さん
いえいえ、うまくいって、よかったです。
優れたスクリプトの公開ありがとうございます。
ID属性を記憶?する事はできるでしょうか?
通常であればページ内のid属性を付けた箇所に＃・・・で移動した後、”戻る”ボタンを押せば、ページ内のそのリンクをクリックした箇所に戻ることができますが、このスクリプトの場合、参照元の「ページ」に移動してしまいます。
視覚的に移動箇所は分かりますが、1ページにナビゲーションリンクを設置している場合、その場所に戻れるリンクをその都度設置するのも面倒なので…。
例えばこのページのナビゲーション位置から、「スクリプトの概要」をクリックし、その部分を読ん後に”戻る”ボタンを押すと、参照もとの”ページ”に移動してしまいます。
> yh さん
「戻る」ボタンの移動には、現在対応しておりません。
お世話になります。
外部ページのリンクからスクロールでまた質問させてください。
外部ページスクロールの設定で、target=”_blank”を指定しても新規ウィンドウが開かないのですが。。なにか方法ございますでしょうか。ご教示いだけると助かります。
> opus さん
実際にどのようになっているのか分からないので想像ですが、おそらくtarget="_blank"の指定とonclickが混在しているためだと思います。
それを混在させるには、
・onclickで新規ウインドウを開く
・新規ウインドウのページにスクローラーを仕込む
の２つになると思います。
仕様によっては、新規ウインドウのページで、onloadにスクローラーを設定するとよいと思います。
すみません、Flashからページ内アンカーリンクはできないでしょうか？
on (release) {
getURL(“../html/aaa.html#h1-02″ onclick=”location.href=’aaa.html?pSch1-02′);
}
こんな感じにしてみたのですが、パブリッシュ時に怒られてしまいます。
html上に簡易的なリンク用のjavaを作って呼び出す方法の方が良いのでしょうか・・・？
> もつ さん
フラッシュからのページ内アンカーの場合、仕様としては明記していませんが、関数「coliss.toAnchor('h201')」を利用できるので、これを使用するとgetURLから動作すると思います。
>コリス様
coliss.toAnchor(’h201′)とは、Flash部分で書けば良いのでしょうか？
IE6の場合、
getURL(“javascript:void(goURL(‘index.html#test))”);
などと書かないと、ページ内のアンカーに飛ばないので、IE6に対応した方法を教えてもらえると助かります。
> もつ さん
「getURL("javascript:coliss.toAnchor('h201')");」のように指定するとよいのではないでしょうか。
>コリス様
ご返答ありがとうございます。
getURL(“javascript:coliss.toAnchor(‘h201′)”);
でいけました。（カッコが一個多かったので少しはまっちゃいました）。Flashからアンカーへ移動できるなんてホント感動です！！
> もつ さん
うまくいって、よかったです。
カッコ多くて、すいません。
修正しておきました。
はじめまして。以前のもつ様のご質問とコリス様のご回答を見て、私もこちらのスクリプトをお借りしてflashで作成したナビゲーションからのページアンカーリンクに挑戦してみたのですが・・・恥ずかしながら知識が足りず、どうしてもうまくいきません。
「getURL(“javascript:coliss.toAnchor(‘h201′)”);」を書き込むということだけはわかったので、アクションを指定しているflashボタンにスクリプトを書きこんで、そのあとどこをどう設定していいのかわかりません。。。どうかお手すきの時にでもご教授願います。よろしくお願い致します。
> 超ビギナー さん
はじめまして。
FlashでのgetURLの解説や設定は、本を参考にするのが分かりやすいと思います。
僕からアドバイスできるのは、「'」「"」などが半角文字かどうか確認してみてください。
また、getURLの使い方があやしいようであれば、簡単なものからやってみるとよいと思います。
例えば、直接「index.html#h201」を設定して、ページ内リンクができるかどうか、「javascript:alert('hello');」ができるかどうか、など。
ページ内リンクがスムーズになるjs「Page Scroller ver.3」
コリスさんのブログ、とっても面白いjsスクリプトなどがいっぱいでとても勉強になりますが、たまにはねむねむ日記もカスタマイズしようと思いまして、最近なが~くなってしまったペー…
いつも利用させていただいております。ありがとうございます。
jquery.ui.tabsとjquery.page-scrollerを同時に利用できません。詳しくソースを読んでおらず原因は把握しておらず申し訳ないのですが、次のバージョンアップなどで上記問題点の改良が進めば大変にうれしいです。
> Yuta@ さん
申し訳ありませんが、問題点がどこにあるのか不明なので、対応することができません。
問題点としては、下記の４つが考えられます。
・jQuery
・jquery.ui.tabs
・jquery.page-scroller
・Yuta@ さんの実装
問題点が明確になり、当スクリプトに問題があれば、お手数ですが、ご連絡ください。可能な限り、対応します。
それは無いと思いますが、念のため簡単なアドバイスです。
jquery.page-scrollerは、$jを使用しているため、他のjQueryのプラグインと併用する場合は、変更する必要があります。
はじめまして。初歩的な質問でもうしわけありません。
このスクリプトのcharsetはUTF-8に限り動くものですか？
shift_jisでは動かないのですが….私のソースに原因があるのですか？
> web_fighter さん
ソースは見ないと分かりませんが、
UTF-8以外でも動作しますよ。
そのままでも動作しますが、どうしても動作しない時はJSファイルを同じエンコードに変更してみてください。
Not working with jquery-1.2.6.js
thanks, Janshi.
but, this script is working with jQuery 1.2.6.
please check "test with jQuery 1.2.6".
はじめまして。
こちらのスクリプトを SyntaxHighlighter と併用したいと考えているのですが、ソースコード上部に表示されるメニュー(view plain等)のリンクをクリックするとページトップへ戻ってしまいます。
解決策はありますか？
> yomoyama さん
SyntaxHighlighterは、このページで使用しているものと同じですよね？
改めて、IE,Fxで確認してみましたが、特に動作の不具合は無いようです。
２つ以外のスクリプトや設置方法などを確認してみてください。
素敵なAjaxのご提供、ありがとうございます。
スクロールのスピードを変更したいのですが、
どのようにすれば変えられるでしょうか。
教えていただけると助かります。よろしくお願いします。
> gawa さん
スクロール時のスピード変更は、フリー版ではサポート外とさせていただています。
フリー版では、スクロールのタイミングのみ変更可能です。
javascript page-scroller
コリスさんのサイトの中に、ページスクローラーの最新版がアップされてた。（しばらく…
Operaの9.60（Win）にて検証しているのですが、ローカル環境では動きませんでした。WEBサーバにアップロードすると正しく動作します。配布されているDemoでも試してみたのですが同様の結果でした。組み込み系の機器での使用を考えており、ローカル環境での動作が必須になるため、お気づきのことがありましたらアドバイスをいただけますでしょうか？
よろしくお願いいたします。
連投失礼します。
参考までに、Safari 3.1.2（Win）に置いても同様の結果でした。
> kj さん
Opera 9.6.0とSafari 3.1.2のローカル環境で動作しないとのご報告、ありがとうございます。
当方でも試してみましたが、特に問題無く動作しました。
※IE6ではローカル環境では動作しません。
頂いた情報からだけでは原因は特定できないのですが、スクリプトのパスを間違っているということはないですよね？
さっそくの（お休み中・・・）ご返信ありがとうございます。
パス等見直しましたがこちらの環境ではやはり動きませんでした。ちなみにOSはXP(SP3)で、Firewall等のセキュリティ制限は特にありません。もう一度環境を変えて検証してみますね。
どうもありがとうございます。
> kj さん
僕の環境もXP3なのですが、特に問題無いです。
パスでもセキュリティ制限でも無いとなると、ちょっと分からないです。
回避策としては、オンラインでは動作するということなので、ローカルサーバーを立てるのはいかがでしょうか？
組み込み系の仕様が分からないので、問題無いか分からないのですが。
> コリスさん
同じ環境となると、ますますわかりませんね。
ローカルサーバを立ててhtp経由でアクセスすればおそらく問題ないと思います。今回はVOD機器のUI試験用にHTMLでコンテンツを表示するテストをしていたのですが、サーバを立てる権限がこちらにないもので・・・。
度々ありがとうございます。
いつも参考になるコンテンツを拝見してとても助かっております。これからもよろしくお願いします。
> kj さん
IE6で動作しない原因はjQueryにあるので、Safari 3上での検証でしたら、jQueryを必要としないPage Scroller ver.2で動作するかもしれません（当方の環境では動作しました）。
※Opera 9.6には対応していません。
Page Scroller ver.2
突然の質問ですいません
このスクリプトはインラインフレームでも動作しますか？
インラインフレームページで記述に沿って書いたつもりなのですが
普通にリンクに飛んでしまいます
もしかしたらなにかバッティングしてしまっているんでしょうか？
入れてはいけないタグなどありましたら教えてください＞＜
> ぷら さん
iframeのデモを作成してみました。
demo: iframe
分かりにくいかもしれませんが、Demo 2の「h2-01に移動」をiframe内とページ自体に実装しています。
どちらも正常に別々のh2-01とトップにスムーズにスクロールしていると思います。
iframeへの実装で気をつける点は特に無いので、一度iframe無しで動作確認をしていただくといいと思います。
入れてはいけないタグはありませんが、別のスクリプトとバッティングするという可能性はあります。
似た動作をするものやタイマーを使用するものなどはその可能性が高いです。
はじめまして。
JSのでも拝見しました。すっごくカッコよかったので使用させて頂いたのですが、内に二つのjavascriptのファイルをリンクさせますが、javascriptの記述の順番で動作しない事はありますでしょうか？
実際記述してみたのですが、動作する場合としない場合がありました。
なら普通にポイントまでジャンプしてしまい・・・
なら動作しました。
このような事は考えられるのでしょうか？
すごく素人な質問で申し訳ありません。
> 真の素人 さん
jQueryのプラグインの仕様です。
動作しないのであれば、試さない方がよいでしょう。
はじめまして、いつも貴重な情報ありがとうございます。
この度、こちらのスクリプトを使わせていただこうと思っているのですが、1点お聞きしたいことがあります。
フラッシュからのページ内アンカーについては、過去の質問から「getURL(“javascript:coliss.toAnchor(‘h201′)”);」の例で可能だとわかったのですが、外部のフラッシュからのアンカーリンクについては可能でしょうか？
自分で色々と試しているのですが、なかなかうまくいかないため質問させていただきました。もしわかりましたら、ご教授いただければ幸いです。
> otani さん
外部のフラッシュからのアンカーリンクの場合は、「外部ページのリンクからスクロール」にある「demo-10-02.html?pSch2-01」を「getURL」に指定するといけると思います。
リンク先のページには、当スクリプトを設置してください。
上記のURLがブラウザのアドレスバーに入力されると、「h2-01」に移動します。
早速のご返信ありがとうございます。
アドバイス通り試してみたところ、あっという間に解決できました！お手数をおかけしてしまい申し訳ありませんでした。
ありがたく、使わせていただきます。そして、今後もコリスさんの記事を見て、勉強させて頂きます！
> otani さん
うまくいって、良かったです。
ご利用、ありがとうございます。
はじめまして。 突然の質問ですみません。
デモにある、doctype有りと無しの違いについて教えてください。
Mac OS10.4.11、Safari3.1.2（サポート外？）なのですが、doctype有りだと帰りしか反応しません。無しだと問題なく動きます。
デモページは両方正常に動作しているので、なにか違いがあるのかと思い、質問させていただきました。
よろしくお願いします。
> No さん
doctypeの有り・無しは簡単に説明すると、座標取得の仕方が異なるブラウザがあるため掲載しています。
Mac OS10.4.11、Safari3.1.2の同一環境は用意できないのですが、問題無く動作すると思います。
デモページで問題無いということは、ブラウザの問題ではなく、設置方法に間違いがないか確認してみてください。
まずは最小限の状態で実装していただき、正常に動作するのを確認後、一つずつ既存の状態にするのがよいと思います。
便利そうなスクリプトなので導入しようと思いましたが、別のスクリプトを読み込ませるときに競合が起きてしまいます。原因をさぐってみると、どうもDOMを見る限り、このスクリプト以降$が空っぽになってしまっています。
コード圧縮に暗号化を加えるpackerを使っているのが原因かもしれないので、無圧縮のファイルを公開するか、比較的互換性が良いといわれているYUI Compresserでの圧縮に変更できませんか？
CC2.1ライセンスなので盗用を防いでいるというわけでもなさそうですし。
> Logue さん
「スクリプトの概要」に記載してあるようにこのスクリプトは、$ではなく、Prototypeなどとの競合を避けるため「$j」を使用しています。
また、無圧縮版や別の圧縮に変更することは考えていません。
「$」版などカスタマイズしたものや無圧縮が必要な場合は申し訳ありませんが、有償にて受け付けますので別途ご連絡ください。
はじめましてこんにちは。
いろんなスムーズスクロールを試してこちらに落ち着きました。
有用なスクリプトをありがとうございます。
また、こちらはIE6はローカルでは動作しないんですね。
コメントを辿ってその旨の記述を見つけてわかりましたが
けっこうな時間ハマってしまったので本文に記載して頂けたら
親切かなと思いました。
余計なお世話でしたらすみません。
初めまして。いつもお世話になっています。
この度はこの有用なスクリプトを導入してみました。
質問させて頂きたいのですが、
ナビゲーションを「position: fixed;」で固定して
任意の場所にスクロールさせてみようと思い、試してみました。
firefoxでは問題なかったのですが、safariでは動作しなくなってしまいます。
環境はMac OS 10.5.7 safari4です。
お忙しい中誠に恐縮なのですが、何か良い回避方法がありましたらご教授いただけないでしょうか。
> kee さん
当方では同じ環境が作れないため、原因を特定することはできないのですが、Safari 4はまだベータ版ですよね？
Windows環境だと、同じエンジン（AppleWebKit）を使用しているGoogle Chromeの最新版2.0でも問題無いので、Safari 4はベータ版だからというのが原因の気がします。
また、原因を特定する際は、不具合があると思われるものだけにしたページにして確認するとよいと思います。
もしよければ、その不具合のページをアップしてもらえれば、何か返答できるかもしれません。コメントに書くのがまずい場合は、メールでください。
コリス様、ご返答有難うございます。
どうやらエントリー側のグリッドに”position: relative;”を記述していたのが原因だったようです。
Firefox3.0.10、Safari3.2.3および、Safari4で動作を確認いたしました。
お手数をお掛けして申し訳ありませんでした。
> kee さん
問題が解決したようなので、
よかったです :-)
このスクリプト、大変、気に入りました。さっそくMyブログに導入させていただきました。
勝手ながら、紹介記事も書かせていただき、リンクも張らせていただきました。
http://hatenachips.blog34.fc2.com/blog-entry-112.html
もしご不都合があればお知らせください。
また、トラックバックも送らせていただきました。
> hatena さん
気に入っていただけて、よかったです。
紹介記事もありがとうございました。
難読化されていないバージョンは公開していただけないのでしょうか。
是非ご検討ください。
> tkr さん
難読化されていないバージョンは有償にて利用可なので、別途「お問い合わせ」よりご連絡ください。
無償版での公開予定はありません。