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

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

追記：

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.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-308.js (5KB)
jquery-1.6.min.js (88KB)
デモファイルを含む一式
page-scroller-308.zip (59KB)
Prototypeの「$」と共存可能な「$j」を使用している版
「$j」版の開発は終了しました。
旧版（jQuery 1.2.6対応）
jQuery1.2.6以下対応版の配付は終了しました。

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

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

必要なファイル

  • jquery.page-scroller.js
    (jquery.page-scroller-308.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要素にも追加し、タブコンテンツ全てでページスクロールを無効化しています。
    ※タブのコンテンツ箇所だけを有効化したい場合は、タブのみに設定してください。

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

※旧版のjquery.page-scroller.jsを使用しています。

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

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

Post on:2007年8月20日


top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

info from 1432

on 2007年8月21日

[web][JavaScript]ページ遷移とユーザビリティ…

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3.00 | コリス コリス ページ内リ (more…)

トレーニングAjax入門3 jQueryプラグインを読み込ませる方法 : 4GALAXYのメモ

on 2007年9月11日

[...] 応用編DEMO – DOWMLOAD シンプルすぎますね。プラグインの容量も4KBなのでお手軽です。ページスクローラーは利用頻度も高いのでいいですね。 作者さんが日本の方なので驚きました。更に詳しい内容を知りたい方は作者さんのページへどうぞ。 Page Scroller | コリス [...]

ゆーすけ

on 2007年9月13日

jquery.jsとjquery-pack.js違いって何なんでしょうね。。

コリス

on 2007年9月13日

> ゆーすけさん

下記ページにあるPacker(多分)を使用して、軽量化している版としていない版です。
あと、pack版はコメント等も削除してます。

http://coliss.com/articles/build-websites/operation/javascript/334.html

ゆーすけ

on 2007年9月13日

さっそくご教授頂きありがとうございます！
なるほど！そういうことでしたか。重い・軽い、ソースがわかりにくい・わかりやすいはあるものの一緒のデータなんですね。ソース見てもjquery-pack.jsは汚いなー何やコレぐらいにしか思っていませんでした。。もっと頑張って勉強しないと！

コリス

on 2007年9月13日

> ゆーすけさん
少しでも容量が軽い方がよいと思うので、軽量化を行っている人も増えてきているようですよ。

vike

on 2007年9月27日

i beg you – please make english variant of this page :)

coliss

on 2007年9月27日

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.

ぎんじ

on 2007年11月27日

はじめまして。　突然すみません。
ぜひ利用させていただこうと思っているのですが、インストラクションどおりにダウンロードしても動きません。
現在なにか不具合等が出ているのでしょうか？

コリス

on 2007年11月27日

> ぎんじ さん

動作しない環境や実装したページを教えていただけると確認できるのですが、情報が無いため的確なアドバイスができません。

もし、こういった場所に明記するのがまずいようでしたら、フォームやメールにて連絡ください。

※多数の実装歴がありますが、不具合の報告というのは特に受けていません。

ぎんじ

on 2007年11月27日

見ず知らずの通行人へのご返信、ありがとうございます！　今朝になって再びパソコンを立ち上げたところ、キレイに動きました・・・先走って質問してしまい、大変申し訳なく思っております。　今思えば、正しく設置すれば簡単に正しく動いてくれる様子。

縦横に動くというのが魅力です。　ありがたく使わせていただきます。

コリス

on 2007年11月27日

> ぎんじ さん

無事に動作して、よかったです。

成海

on 2007年12月12日

はじめまして。
こちらのJacascriptの「使用条件」について質問させてください。

「非商用利用に限りフリー」とのことですが、
仕事で作っているページにこれを使うことはできない

ということでよろしいでしょうか。
認識間違いないでしょうか。

とても有益なので是非使いたいところです。

コリス

on 2007年12月12日

> 成海 さん

仕事などの商用利用の場合は、フリーでの使用はできません。
別途ご相談を受けていますので、お手数ですが、contactのフォームかメールにてお問い合わせをお願いします。

※上記に明記していなかったので、追記しました。

成海

on 2007年12月12日

お早いお返事ありがとうございます。
商用は不可でお金がかかるということですね、了解しました。

ちょっと残念ですが、お金の話をお客さんにすると、「じゃあ、いいです」と言われてしまうのがオチなので、今回の使用は控えますね。

それにしても、とても興味のあることをたくさん書いてらっしゃるので、
久々にヒットしたサイト様でした。
今後も参考にさせてもらいます。

コリス

on 2007年12月12日

> 成海 さん

すいません。
今後も、よろしくお願いします。

moco

on 2007年12月23日

はじめまして、有益なブログですね！
さっそくこのスクリプトを自分のブログに使わせて頂こうと思い、お礼のコメントをさせて頂きました。

優良な情報が多すぎてまだとても見きれていないのですが、今後も勉強させて頂きたいです。よろしくお願いします。

aimy.moco - 曖昧：模糊 -

on 2007年12月23日

Back Scroll Button…

今更だけどページ上部に戻るためのボタンを追加してみた。ちょうど前回でエントリー… (more…)

あざらし

on 2007年12月26日

いつもタメになる情報、ありがとうございます。
このスクリプトですが、自分のFirefoxだと、
「coliss has no properties」と出てデモページから
動きません。
・・・かなりいろいろアドオン入れているので、
正常な環境ではありませんけども。

コリス

on 2007年12月26日

> あざらし さん

ありがとうございます。
確かに、Firefoxでは動作しませんでした。

デモページ・圧縮ファイルなど全てに最新版をアップしなおしました。

あざらし

on 2007年12月26日

最速修正していただいて、ありがとうございます！
確かに動作しました。
縦横の動きが美しいですね。

コリス

on 2007年12月26日

> あざらし さん

確認まで、本当にありがとうございます。

ふれあい果樹園 Weblog

on 2008年1月26日

すみませ〜ん ^_^;/scloll…

この Blog JS ファイルなど取り除いて極力軽くしてみました〜などと宣言しておいて、その舌の根も乾かぬ内に、またまた JS ファイルを追加してしまいましたぁでも、ま (more…)

ななし

on 2008年2月11日

はじめまして！
スクロールのスピードを変更することはできるのでしょうか?

コリス

on 2008年2月12日

> ななし さん

スクロールのスピードは、変更できますよ。

mm

on 2008年2月13日

はじめまして、先ほどデモをまるごとダウンロードしたのですがfirefoxだと正常に表示されるのですがIEだと表示されません。web上のサンプルは通常通り拝見できました。どういう違いがあるのでしょうか？

コリス

on 2008年2月13日

> mm さん

すいませんが、ご利用のIEの環境(IEのバージョンとOS)を教えていただけますか？

先程、このページからデモファイル一式(page-scroller-303.zip)をダウンロードし、確認したところ、IE7+Windows XPの環境では、問題無く動作しました。

ちなみに、公開しているものとダウンロードできるファイルに違いはありません。

>コリスさん

on 2008年2月13日

早速のご返答ありがとうございます。環境はIE６で別PCでそれぞれダウンロードしたところ同じ結果でした。web上のものは問題無く作動しています。サイトに組み込んでもみましたがスクロールせずジャンプするだけになっていました。firefoxでは問題なく作動確認ができました。どういう理由でそうなるんでしょう？？

mm

on 2008年2月13日

あーっとすいません。ぼーっとしてnameのところに・・・
追記しますとIE6＋xpで、Alertでスクリプトが読めてないとかの確認もしてみましたが正常でした。たびたびすいません。

コリス

on 2008年2月13日

おそらく、hrefに記述した「#top」などが、スクリプトより先に反応してしまうことが原因だと思います。

ウェブ上では問題無いということと、IE7、Fx2などでは問題無いのを当方の環境で確認しているので、申し訳ありませんが、サポート外とさせていただきます。

以下、参考までに。
その箇所は、jQueryの機能で動作しており、その部分を当スクリプトで対応することは可能ですが、それにより当スクリプトが肥大化してしまうのを避けることを優先にしようと思います。

もし、次回のバージョンでjQuery不要版を作成した際は、対応可能になっていると思います。

mm

on 2008年2月13日

>コリスさん
なるほど！ありがとうございます。謎が解けてすっきりです。

コリス

on 2008年2月13日

> mm さん

また何かありましたら、よろしくお願いします。

ハル

on 2008年3月18日

初めましてこんにちは。
使わせて頂きました。有難うございます。
DLするファイル名は「jquery.page-scroller-303.js」ですが、「外部スクリプトとして参照させます」の説明部分では「jquery.page-scroller.js」になっていましたので一応お知らせを。

コリス

on 2008年3月18日

> ハル さん

ご利用、ありがとうございます。
ファイル名の件は間違いではなく、そのようにしています。

直接DLするファイルは、バージョンアップが分かるように数字有り。
使用する場合は、ファイル名を変更する手間がないように数字無し。

その旨、必要なファイルに記載があるので、使用する場合には間違いのないようにお願いします。

opus

on 2008年4月23日

外部ページからのスクロールに、スクロール先の地点を微調整を設定したいのですが、巧くいかないのですが・。

adjPosition = -30;
callExternal = “pSc”;のような指定は街が手いますでしゅか
delayExternal= 200

opus

on 2008年4月23日

↑すいません、途中で送ってしまいました。
外部ページのリンクからスクロール＋スクロール先の地点を微調整を行うにはどのように記述すればよろしいのでしょうか。

コリス

on 2008年4月23日

> ops さん

外部リンク＋微調整のデモ（-126pxで指定）をアップしてみました。

外部リンク＋微調整のデモ

記述する箇所は、移動先ページのL.8-10にある「var adjPosition = -126;」の指定です。

なかにしゆうすけ

on 2008年4月23日

delayExternal= 200をdelayExternal= 150ぐらいにするとIEではスクロールの起動を遅く出来るのですがFirefoxでは変化がありませんでした。どうすれば良いでしょうか？お教え下さい。

opus

on 2008年4月24日

わざわざサンプルまで作っていただきありがとうございます。
無事地点指定することができました！

コリス

on 2008年4月24日

> なかにしゆうすけ さん

150で遅くは多分逆だと思うのですが、数が大きいほど遅延します。
50の増減だと、数字の単位が1/1000秒単位のため、あまり体感できないと思います。
体感できるくらい遅くする場合は、「1000」くらいを指定するといいと思います。

※Fx2で確認したところ、500くらいでワンテンポ遅れるくらいに感じました。
※200より速く（小さく）する場合、ページのロードが行えるか充分な検証を行ってください。

なかにしゆうすけ

on 2008年4月24日

変な質問をしてしまってすみません。
できました！ありがとうございます。

コリス

on 2008年4月24日

> opus さん
うまくいって、よかったです。

>なかにしゆうすけ さん
いえいえ、うまくいって、よかったです。

yh

on 2008年4月29日

優れたスクリプトの公開ありがとうございます。

ID属性を記憶?する事はできるでしょうか?

通常であればページ内のid属性を付けた箇所に＃・・・で移動した後、”戻る”ボタンを押せば、ページ内のそのリンクをクリックした箇所に戻ることができますが、このスクリプトの場合、参照元の「ページ」に移動してしまいます。

視覚的に移動箇所は分かりますが、1ページにナビゲーションリンクを設置している場合、その場所に戻れるリンクをその都度設置するのも面倒なので…。

例えばこのページのナビゲーション位置から、「スクリプトの概要」をクリックし、その部分を読ん後に”戻る”ボタンを押すと、参照もとの”ページ”に移動してしまいます。

コリス

on 2008年4月29日

> yh さん

「戻る」ボタンの移動には、現在対応しておりません。

opus

on 2008年5月9日

お世話になります。
外部ページのリンクからスクロールでまた質問させてください。

外部ページスクロールの設定で、target=”_blank”を指定しても新規ウィンドウが開かないのですが。。なにか方法ございますでしょうか。ご教示いだけると助かります。

コリス

on 2008年5月9日

> opus さん

実際にどのようになっているのか分からないので想像ですが、おそらくtarget="_blank"の指定とonclickが混在しているためだと思います。

それを混在させるには、
・onclickで新規ウインドウを開く
・新規ウインドウのページにスクローラーを仕込む
の２つになると思います。

仕様によっては、新規ウインドウのページで、onloadにスクローラーを設定するとよいと思います。

もつ

on 2008年5月20日

すみません、Flashからページ内アンカーリンクはできないでしょうか？

on (release) {
getURL(“../html/aaa.html#h1-02″ onclick=”location.href=’aaa.html?pSch1-02′);
}

こんな感じにしてみたのですが、パブリッシュ時に怒られてしまいます。

html上に簡易的なリンク用のjavaを作って呼び出す方法の方が良いのでしょうか・・・？

コリス

on 2008年5月20日

> もつ さん

フラッシュからのページ内アンカーの場合、仕様としては明記していませんが、関数「coliss.toAnchor('h201')」を利用できるので、これを使用するとgetURLから動作すると思います。

もつ

on 2008年5月21日

>コリス様

coliss.toAnchor(’h201′)とは、Flash部分で書けば良いのでしょうか？

IE6の場合、
getURL(“javascript:void(goURL(‘index.html#test))”);
などと書かないと、ページ内のアンカーに飛ばないので、IE6に対応した方法を教えてもらえると助かります。

コリス

on 2008年5月21日

> もつ さん

「getURL("javascript:coliss.toAnchor('h201')");」のように指定するとよいのではないでしょうか。

もつ

on 2008年5月21日

>コリス様

ご返答ありがとうございます。

getURL(“javascript:coliss.toAnchor(‘h201′)”);

でいけました。（カッコが一個多かったので少しはまっちゃいました）。Flashからアンカーへ移動できるなんてホント感動です！！

コリス

on 2008年5月21日

> もつ さん

うまくいって、よかったです。

カッコ多くて、すいません。
修正しておきました。

超ビギナー

on 2008年6月11日

はじめまして。以前のもつ様のご質問とコリス様のご回答を見て、私もこちらのスクリプトをお借りしてflashで作成したナビゲーションからのページアンカーリンクに挑戦してみたのですが・・・恥ずかしながら知識が足りず、どうしてもうまくいきません。
「getURL(“javascript:coliss.toAnchor(‘h201′)”);」を書き込むということだけはわかったので、アクションを指定しているflashボタンにスクリプトを書きこんで、そのあとどこをどう設定していいのかわかりません。。。どうかお手すきの時にでもご教授願います。よろしくお願い致します。

コリス

on 2008年6月11日

> 超ビギナー さん

はじめまして。
FlashでのgetURLの解説や設定は、本を参考にするのが分かりやすいと思います。

僕からアドバイスできるのは、「'」「"」などが半角文字かどうか確認してみてください。

また、getURLの使い方があやしいようであれば、簡単なものからやってみるとよいと思います。
例えば、直接「index.html#h201」を設定して、ページ内リンクができるかどうか、「javascript:alert('hello');」ができるかどうか、など。

ねむねむ日記

on 2008年6月25日

ページ内リンクがスムーズになるjs「Page Scroller ver.3」

コリスさんのブログ、とっても面白いjsスクリプトなどがいっぱいでとても勉強になりますが、たまにはねむねむ日記もカスタマイズしようと思いまして、最近なが~くなってしまったペー…

Yuta@

on 2008年8月2日

いつも利用させていただいております。ありがとうございます。
jquery.ui.tabsとjquery.page-scrollerを同時に利用できません。詳しくソースを読んでおらず原因は把握しておらず申し訳ないのですが、次のバージョンアップなどで上記問題点の改良が進めば大変にうれしいです。

コリス

on 2008年8月2日

> Yuta@ さん

申し訳ありませんが、問題点がどこにあるのか不明なので、対応することができません。

問題点としては、下記の４つが考えられます。
・jQuery
・jquery.ui.tabs
・jquery.page-scroller
・Yuta@ さんの実装

問題点が明確になり、当スクリプトに問題があれば、お手数ですが、ご連絡ください。可能な限り、対応します。

それは無いと思いますが、念のため簡単なアドバイスです。
jquery.page-scrollerは、$jを使用しているため、他のjQueryのプラグインと併用する場合は、変更する必要があります。

web_fighter

on 2008年8月12日

はじめまして。初歩的な質問でもうしわけありません。
このスクリプトのcharsetはUTF-8に限り動くものですか？
shift_jisでは動かないのですが….私のソースに原因があるのですか？

コリス

on 2008年8月12日

> web_fighter さん

ソースは見ないと分かりませんが、
UTF-8以外でも動作しますよ。
そのままでも動作しますが、どうしても動作しない時はJSファイルを同じエンコードに変更してみてください。

Janshi

on 2008年8月16日

Not working with jquery-1.2.6.js

coliss

on 2008年8月16日

thanks, Janshi.

but, this script is working with jQuery 1.2.6.
please check "test with jQuery 1.2.6".

yomoyama

on 2008年8月26日

はじめまして。
こちらのスクリプトを SyntaxHighlighter と併用したいと考えているのですが、ソースコード上部に表示されるメニュー(view plain等)のリンクをクリックするとページトップへ戻ってしまいます。
解決策はありますか？

コリス

on 2008年8月26日

> yomoyama さん

SyntaxHighlighterは、このページで使用しているものと同じですよね？
改めて、IE,Fxで確認してみましたが、特に動作の不具合は無いようです。

２つ以外のスクリプトや設置方法などを確認してみてください。

gawa

on 2008年8月26日

素敵なAjaxのご提供、ありがとうございます。

スクロールのスピードを変更したいのですが、
どのようにすれば変えられるでしょうか。
教えていただけると助かります。よろしくお願いします。

コリス

on 2008年8月26日

> gawa さん

スクロール時のスピード変更は、フリー版ではサポート外とさせていただています。
フリー版では、スクロールのタイミングのみ変更可能です。

Blog | sevenstyleweb

on 2008年9月4日

javascript page-scroller

コリスさんのサイトの中に、ページスクローラーの最新版がアップされてた。（しばらく…

kj

on 2008年10月13日

Operaの9.60（Win）にて検証しているのですが、ローカル環境では動きませんでした。WEBサーバにアップロードすると正しく動作します。配布されているDemoでも試してみたのですが同様の結果でした。組み込み系の機器での使用を考えており、ローカル環境での動作が必須になるため、お気づきのことがありましたらアドバイスをいただけますでしょうか？

よろしくお願いいたします。

kj

on 2008年10月13日

連投失礼します。
参考までに、Safari 3.1.2（Win）に置いても同様の結果でした。

コリス

on 2008年10月13日

> kj さん

Opera 9.6.0とSafari 3.1.2のローカル環境で動作しないとのご報告、ありがとうございます。

当方でも試してみましたが、特に問題無く動作しました。
※IE6ではローカル環境では動作しません。

頂いた情報からだけでは原因は特定できないのですが、スクリプトのパスを間違っているということはないですよね？

kj

on 2008年10月13日

さっそくの（お休み中・・・）ご返信ありがとうございます。
パス等見直しましたがこちらの環境ではやはり動きませんでした。ちなみにOSはXP(SP3)で、Firewall等のセキュリティ制限は特にありません。もう一度環境を変えて検証してみますね。

どうもありがとうございます。

コリス

on 2008年10月13日

> kj さん

僕の環境もXP3なのですが、特に問題無いです。
パスでもセキュリティ制限でも無いとなると、ちょっと分からないです。

回避策としては、オンラインでは動作するということなので、ローカルサーバーを立てるのはいかがでしょうか？
組み込み系の仕様が分からないので、問題無いか分からないのですが。

kj

on 2008年10月13日

> コリスさん

同じ環境となると、ますますわかりませんね。
ローカルサーバを立ててhtp経由でアクセスすればおそらく問題ないと思います。今回はVOD機器のUI試験用にHTMLでコンテンツを表示するテストをしていたのですが、サーバを立てる権限がこちらにないもので・・・。

度々ありがとうございます。
いつも参考になるコンテンツを拝見してとても助かっております。これからもよろしくお願いします。

コリス

on 2008年10月13日

> kj さん

IE6で動作しない原因はjQueryにあるので、Safari 3上での検証でしたら、jQueryを必要としないPage Scroller ver.2で動作するかもしれません（当方の環境では動作しました）。
※Opera 9.6には対応していません。

Page Scroller ver.2

ぷら

on 2008年10月22日

突然の質問ですいません
このスクリプトはインラインフレームでも動作しますか？

インラインフレームページで記述に沿って書いたつもりなのですが
普通にリンクに飛んでしまいます
もしかしたらなにかバッティングしてしまっているんでしょうか？

入れてはいけないタグなどありましたら教えてください＞＜

コリス

on 2008年10月22日

> ぷら さん

iframeのデモを作成してみました。
demo: iframe

分かりにくいかもしれませんが、Demo 2の「h2-01に移動」をiframe内とページ自体に実装しています。
どちらも正常に別々のh2-01とトップにスムーズにスクロールしていると思います。

iframeへの実装で気をつける点は特に無いので、一度iframe無しで動作確認をしていただくといいと思います。

入れてはいけないタグはありませんが、別のスクリプトとバッティングするという可能性はあります。
似た動作をするものやタイマーを使用するものなどはその可能性が高いです。

真の素人

on 2008年11月12日

はじめまして。
JSのでも拝見しました。すっごくカッコよかったので使用させて頂いたのですが、内に二つのjavascriptのファイルをリンクさせますが、javascriptの記述の順番で動作しない事はありますでしょうか？
実際記述してみたのですが、動作する場合としない場合がありました。

なら普通にポイントまでジャンプしてしまい・・・

なら動作しました。
このような事は考えられるのでしょうか？
すごく素人な質問で申し訳ありません。

コリス

on 2008年11月12日

> 真の素人 さん

jQueryのプラグインの仕様です。
動作しないのであれば、試さない方がよいでしょう。

otani

on 2008年11月19日

はじめまして、いつも貴重な情報ありがとうございます。

この度、こちらのスクリプトを使わせていただこうと思っているのですが、1点お聞きしたいことがあります。
フラッシュからのページ内アンカーについては、過去の質問から「getURL(“javascript:coliss.toAnchor(‘h201′)”);」の例で可能だとわかったのですが、外部のフラッシュからのアンカーリンクについては可能でしょうか？

自分で色々と試しているのですが、なかなかうまくいかないため質問させていただきました。もしわかりましたら、ご教授いただければ幸いです。

コリス

on 2008年11月19日

> otani さん

外部のフラッシュからのアンカーリンクの場合は、「外部ページのリンクからスクロール」にある「demo-10-02.html?pSch2-01」を「getURL」に指定するといけると思います。
リンク先のページには、当スクリプトを設置してください。

上記のURLがブラウザのアドレスバーに入力されると、「h2-01」に移動します。

otani

on 2008年11月19日

早速のご返信ありがとうございます。

アドバイス通り試してみたところ、あっという間に解決できました！お手数をおかけしてしまい申し訳ありませんでした。

ありがたく、使わせていただきます。そして、今後もコリスさんの記事を見て、勉強させて頂きます！

コリス

on 2008年11月19日

> otani さん

うまくいって、良かったです。
ご利用、ありがとうございます。

No

on 2008年11月27日

はじめまして。　突然の質問ですみません。
デモにある、doctype有りと無しの違いについて教えてください。
Mac OS10.4.11、Safari3.1.2（サポート外？）なのですが、doctype有りだと帰りしか反応しません。無しだと問題なく動きます。
デモページは両方正常に動作しているので、なにか違いがあるのかと思い、質問させていただきました。
よろしくお願いします。

コリス

on 2008年11月27日

> No さん

doctypeの有り・無しは簡単に説明すると、座標取得の仕方が異なるブラウザがあるため掲載しています。

Mac OS10.4.11、Safari3.1.2の同一環境は用意できないのですが、問題無く動作すると思います。
デモページで問題無いということは、ブラウザの問題ではなく、設置方法に間違いがないか確認してみてください。
まずは最小限の状態で実装していただき、正常に動作するのを確認後、一つずつ既存の状態にするのがよいと思います。

Logue

on 2008年12月10日

便利そうなスクリプトなので導入しようと思いましたが、別のスクリプトを読み込ませるときに競合が起きてしまいます。原因をさぐってみると、どうもDOMを見る限り、このスクリプト以降$が空っぽになってしまっています。

コード圧縮に暗号化を加えるpackerを使っているのが原因かもしれないので、無圧縮のファイルを公開するか、比較的互換性が良いといわれているYUI Compresserでの圧縮に変更できませんか？

CC2.1ライセンスなので盗用を防いでいるというわけでもなさそうですし。

コリス

on 2008年12月10日

> Logue さん

「スクリプトの概要」に記載してあるようにこのスクリプトは、$ではなく、Prototypeなどとの競合を避けるため「$j」を使用しています。

また、無圧縮版や別の圧縮に変更することは考えていません。
「$」版などカスタマイズしたものや無圧縮が必要な場合は申し訳ありませんが、有償にて受け付けますので別途ご連絡ください。

sak-ma

on 2009年3月21日

はじめましてこんにちは。
いろんなスムーズスクロールを試してこちらに落ち着きました。
有用なスクリプトをありがとうございます。

また、こちらはIE6はローカルでは動作しないんですね。
コメントを辿ってその旨の記述を見つけてわかりましたが
けっこうな時間ハマってしまったので本文に記載して頂けたら
親切かなと思いました。

余計なお世話でしたらすみません。

kee

on 2009年5月24日

初めまして。いつもお世話になっています。
この度はこの有用なスクリプトを導入してみました。

質問させて頂きたいのですが、
ナビゲーションを「position: fixed;」で固定して
任意の場所にスクロールさせてみようと思い、試してみました。
firefoxでは問題なかったのですが、safariでは動作しなくなってしまいます。
環境はMac OS 10.5.7 safari4です。

お忙しい中誠に恐縮なのですが、何か良い回避方法がありましたらご教授いただけないでしょうか。

コリス

on 2009年5月24日

> kee さん

当方では同じ環境が作れないため、原因を特定することはできないのですが、Safari 4はまだベータ版ですよね？

Windows環境だと、同じエンジン（AppleWebKit）を使用しているGoogle Chromeの最新版2.0でも問題無いので、Safari 4はベータ版だからというのが原因の気がします。

また、原因を特定する際は、不具合があると思われるものだけにしたページにして確認するとよいと思います。
もしよければ、その不具合のページをアップしてもらえれば、何か返答できるかもしれません。コメントに書くのがまずい場合は、メールでください。

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 さん

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

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

sketch/u

on 2010年2月14日

ページ内をスムーズにスクロール

JQueryを使ったページ内をスムーズにスクロールさせているサイトを見ていいなぁと思って使い方を探していたらとても良いサイトを見つけたので参考にしてみる。…

links for 2010-02-22 | ウェブル

on 2010年2月23日

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

Logue

on 2010年5月21日

すみません、スクリプトが実行されるタイミングとかを変更することはできませんか？
$(‘#dhtml_toc a’).page-scroller();みたいな形式で実行できるとありがたいのですが。

ページを開いた後実行される、ページ全体のH2タグを取得して、動的に見出しリストを作るプログラムでも、スクロールを機能させたいので。

コリス

on 2010年5月21日

> Logue さん

coliss.toAnchor();で可能です。

XREAでwordpress使用拡張備忘録 - みついれ＠カオス

on 2010年6月12日

[...] jsのスクロールをファイル制作。3 [...]

Vicuna CMSテーマいじりメモ＋wordpressプラグインメモ - みついれ＠カオス

on 2010年6月14日

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

KITA

on 2010年6月18日

とても有用なスクリプトですね！

さっそく使わせていただきましたところ、以下の場合にスクロール動作がおこなわれませんでした。ブラウザによるものなのか、スクリプトで解決できるところなのか、もし確認できていましたらアドバイスいただけるとたすかります。

【ケース】
URLに2バイト文字が含まれているとき

【症状】
動作しない、もしくはスクロールせずにTOPへ飛ぶ

【環境】
Page Scroller ver.3.06
ブラウザ:Safari(Mac, Windos)
※Firefox, IEでは問題なく動作しています

コリス

on 2010年6月19日

> KITA さん

ご利用、ありがとうございます。

申し訳ありませんが、
2バイト文字は非対応とさせていただています。

Vicuna CMSテーマカスタマイズ＋wordpressプラグイン使用一覧メモ - みついれ＠うぇぶろぐ

on 2010年6月20日

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

KITA

on 2010年6月21日

コリスさんへ

> 2バイト文字は非対応とさせていただています。

回答ありがとうございました。

ブログの利用で、日本語タグを含めたＵＲＬなどの場合に、動作しないということが考えられると思いますが、今後バージョンアップなどを実施する際に、検討項目としていただけたらうれしいです。

ありがとうございました。

ページスクロールスクリプト page scroller « ホームページ制作の付箋

on 2010年8月23日

[...] ページスクロールスクリプト page scroller カテゴリー: WordPress,便利ツール — タグ: スクリプト — admin @ 12:15 pm [JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -P… [...]

Torna su con Jquery « Ebug – Discussioni da Web Designer

on 2010年9月7日

[...] isogno di un prezioso plugin di jquery jquery.page-scroller [...]

匿名

on 2010年9月21日

利用規約のことで質問させて下さい。
個人サイトでこのスクリプトを使用したいのですが、条件に
「あなたは原著作者のクレジットを表示しなければなりません。」
とありますが、どういった形でクレジットを表記すればいいのでしょうか？
スクリプトを使用したページではなく、リンクなどをまとめているページでも構わないでしょうか？
また表記の仕方についても、教えて頂けると嬉しいです。

コリス

on 2010年9月21日

> 匿名さん

質問がある際は、お名前に「匿名」ではなく、ある程度固有の名称をご使用ください。

匿名

on 2010年9月21日

9月21日にPage Scroller ver.3の利用規約について質問させて頂いた者です。
匿名で質問してしまい申し訳ありません。
うっかり記入を忘れてしまいました…以後気をつけます。
もしよろしければ、回答して頂けると嬉しいです。

匿名

on 2010年9月21日

何度もコメントすみません。９月２１日にスクロールのスクリプトについて質問させて頂いた者ですが、どういう訳か、nameの欄に名前を入れても、何故かそちらに送信されていないようです。
再び匿名で送信してしまう失礼な結果になってしまい大変申し訳ありません。
なのでこちらで名乗らせて頂きます。あさひと言います。
大変失礼致しました。

コリス

on 2010年9月21日

> あさひさん

クレジット表記はスクリプト内にあるもので、それを削除せずにご利用いただけば問題ありません。ページ内の見える箇所に記す必要はありません。

コメントの名前の件はそうでしたか。こちらでも設定に問題がないか確認してみます。

コリス

on 2010年9月21日

> あさひさん

フォームの設定を修正しました。
ご迷惑をおかけしました。

MODxでアンカーへのリンクが飛ばせない | ぷらこぷらん～不景気のあおりをモロに食らう中小企業のへっぽこIT担当のブログ～

on 2010年10月21日

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

kabuki

on 2010年11月9日

早速導入してみました。ありがとうございます。
IE6で、動作しないようなのですが、何か特別な定義が必要なのでしょうか？

コリス

on 2010年11月9日

> kabuki さん

IE6用に特別な設定は不必要です。
他のブラウザでも同様の現象が起きてますか？

kabuki

on 2010年11月9日

コリスさん
>他のブラウザでも同様の現象が起きてますか？

IE6とIE7で動作しないです。
よろしくお願いします。

コリス

on 2010年11月9日

> kabuki さん

IE7もですか！
当サイトに設置してあるデモページも動作しませんか？

kabuki

on 2010年11月9日

コリスさん

>当サイトに設置してあるデモページも動作しませんか？

IE6でも、動作しますね！

コリス

on 2010年11月9日

> kabuki さん

となると、設置がうまくいっていない可能性が高いです。
リンク先のid、リンク元のhref、は正しく記述されてるでしょうか？
例：id=test1, href=#test1

また、一度当サイトのデモを使用して一旦動作確認を行い、その後kabukiさんのファイルに適用してみてはいかがでしょうか？
適用する際はいきなり全部ではなく、機能を追加するごとに動作確認をしながらやると、原因が特定できると思います。

kabuki

on 2010年11月9日

コリスさん

デモファイルを含む一式
page-scroller-306.zip
をダウンロードしてためしました。
IE6では動作しませんでした。
すみません。よろしくお願いします。

コリス

on 2010年11月9日

> kabuki さん

ひょっとして、ローカル環境での動作でしょうか？
それは、上記にも書いてある通り、IE6では動作しないです。
サーバーにアップロードして、オンラインで確認してみてください。

kabuki

on 2010年11月9日

コリスさん

サンプルをサーバーにアップしたら動作しました。
すみませんでした。
一つひとつチェックしていきます。
ありがとうございました。

コリス

on 2010年11月9日

> kabuki さん

とりあえず、良かったです。
また、何かありましたら、ご連絡ください。

kabuki

on 2010年11月9日

コリスさん

また、宜しくお願いします。

NAOKI

on 2010年11月18日

はじめまして。NAOKIと申します。
使用条件にある、非商用利用について質問があります。
「表示-非営利-継承2.1日本」も確認したのですが、これは他社へ納品するサイトではなく、自社サイトへの利用も該当しますか？
ダメだろうなと思いつつ…念のために確認させてください。
ご返信よろしくお願い致します。

コリス

on 2010年11月18日

> NAOKI さん

自社サイトということは、営利目的である会社のウェブサイトに使用するということになると思いますので、非商用での利用とはなりません。

NAOKI

on 2010年11月18日

早々のご返信に感謝いたします。
念のためにと思ったんですが、そりゃダメですよね…。
分かり切った質問、失礼しました。

こちらのサイトは色々と勉強になります。
今後も参考にさせていただきます。
ありがとうございました。

NAOKI

on 2010年11月23日

こんにちは。
以前に質問させていいただいたNAOKIです。
なんと！商用利用が可能になったんですね！
これは非常にありがたい！さっそく使用させていいただきます。
本当にありがとうございます！！

Blog BOWWORKS

on 2010年12月7日

Page Scrollerが使いやすくなって僕は嬉しいんですよ！

えーっと、ちょっと前のことだったんですけど、いい機会なので……。
Web制作とかデザインとか、そういう人たちの10人中9人くらいは知っているであろうブログの一つ「Coliss（コリス）…

ヒロ

on 2010年12月10日

はじめまして。
ちょうどこういうのを探していました！
す～っと動くと心地よいですね。
商用でも利用できるとのことで、
早速使わせていただきたいと思います。
ありがとうございました。

なおみ

on 2010年12月20日

はじめまして。こちらを知り、取り入れたいのですがどうしてもうまくいかないのでご相談です。
左側に固定のメニュー欄、右側に内容というレイアウトをCSSでの擬似フレームを使って組んでいます。
その右側の中でスクロールさせたいのですが全く動きません。
CSS無効で表示すると正常に作動します。
左固定、右内容という最小限のレイアウトを組んだ時点で動かなくなってしまいます。

winIE7、firefox、オンライン・オフライン、他スクリプトとの併用あり・なし、など
試しましたがいずれも同じ結果でした。
思い当たることがありましたらアドバイスいただけると幸いです。

コリス

on 2010年12月21日

> なおみ さん

どのように実装されているか分かりませんが、一部固定位置表示を使用しても問題なく動作します。
次のデモはスクリプトを使用したものですが、ご参考に。
パネルがスクロールに追随して表示

なおみ

on 2010年12月22日

ご返信ありがとうございます。
サンプルページですが、winIE7で動作せず
（もちろんJavaは有効にしてあります。）
自サイトでも現行レイアウトでは解決しておりません・・・。
もっとスクリプトの勉強をしながら、違うレイアウトでもやってみます。

コリス

on 2010年12月22日

> なおみ さん

固定表示にするスクリプトの方がIE7に対応してないためですね。
以前、つくったものがそれを実装しているので、不可能ではないですよ。がんばってください。

タコ助　（匿名でお願いします。）

on 2011年1月8日

jquery.ui.tabsとjquery.page-scrollerを同時に利用ができずいろいろ探していたところ、このサイトのコメント欄にたどり着きました。

私自身、スクリプトの知識がないため何が悪いのかわかりませんが、間違いなく、この2つの併用に問題があると思います。
症状：スクロールは正常に作動しますが、タブが機能しなくなります。
ちなみに、併用したTabsはこちらのものです。
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

対応していただければ幸いですが、もし無理な場合、併用できるTabsを教えていただけませんでしょうか？

よろしくお願いいたします。

尚、匿名でお願いします。

コリス

on 2011年1月8日

> タコ助 さん

該当のタブのスクリプトは、タブの切り替えに#を使用しているため、当スクリプトがページ内アンカーとして機能しています。
タブの切り替えには、#を使用していないものをご利用ください。

たかやま

on 2011年1月11日

はじめまして。
とても便利なスクリプトをありがとうございます。
一つ質問があります。

CALM-WEB.COM

こちらのフローティングメニューのスクリプトと一緒に使おうと思ったのですが、フローティングメニュー内にトップへのリンクを貼ったのですが、そのリンクをクリックしてもスムーズスクロールしないのです。
フローティングメニュー以外の部分に書いたリンクをクリックすると、問題なくスムーズスクロールします。
何が原因なのかおわかりになりますでしょうか？
宜しくお願いいたします。

コリス

on 2011年1月11日

> たかやま さん

教えていただいた次のサイトが見ることができませんでした。
http://calm-web.com/

たかやま

on 2011年1月12日

失礼いたしました。

http://www.calm-web.com/lecture/script/m_script/index.html

このスクリプトなのですが、見られますでしょうか？

コリス

on 2011年1月12日

> たかやま さん

スクリプト試してみましたが、同じようにパネル上の場合は動作しませんでした。
ちょっと見、何が原因かは分かりませんでした。

lucky

on 2011年1月15日

overflow:scrollを指定したdiv要素を対象にスクロールさせたいのですがどうればよいでしょうか？

そのdiv要素はbody直下でwidth、height共に100%となっているので、サイズや高さに関する計算はそのままで大丈夫だと思うのですが、肝心の対象セレクタがどこで指定されているかわかりませんでした。

よろしくお願いします。

コリス

on 2011年1月15日

> lucky さん

overflow:scrollでのスクロールはサポートされていません。

内田

on 2011年1月26日

コリスさん、いつも勉強をさせていただいております。

1つ質問があります。
Page Scrollerを問題無く使わせていただいておりましたが、
マップイメージからのアンカーリンクだとスクロールしないようです。
テストページ…http://902grp.com/scroller/demo-2.html

テストページ内の赤い三角画像がマップイメージなのですが、
そこからリンク先へはスクロールしません。
（他のテキストリンクからはスクロールします）
解決策をご存知でしたら、ご教示お願いいたします。

コリス

on 2011年1月26日

> 内田 さん

現在配付しているバージョンでは、動作しない仕様になっています。動作する版を公開するかどうか、検討してみます。

内田

on 2011年1月27日

お返事ありがとうございます。
仕様上のことでしたか、了解しました。
いつも愛用させていただいているスクリプトなので、
動作する版の公開をぜひぜひよろしくお願いいたします。

コリス

on 2011年1月27日

> 内田 さん

週末を使って、作業してみますね。

dogear

on 2011年2月8日

初めまして。いつも拝見させていただいております。
さて、『外部ページのリンクからスムーズにスクロールさせる方法』に関してなのですが、リンクへのonclick～等の記述が面倒なので、対象のリンクにCSSのクラスをもたせてjs側で調整という仕様にして利用しています。

例えば、psc というCSSのクラスをつけて、
$(“.psc”).click(function(e){
var shiftKey = e.shiftKey;
var tgt = $(this).attr(“target”);
var url = $(this).attr(“href”);
var hash = url.split(‘#’);
var location = hash[0] + “?pSc” + hash[1];
if(tgt == “_blank” || shiftKey){
window.open(location);
}else{
window.location=location;
}
return false;
});
コードの素人臭さはご了承いただいて、こんな感じです。

CSSクラスをつけるだけで外部リンクにも対応のような仕様を、PageScroller本体に組み込んでいただけたら、個人的にとてもうれしいです。
組み込んでいただけなくても、もちろんありがたく利用させていただきます。
それでは、今後とも期待しています。

コリス

on 2011年2月8日

> dogear さん

ありがとうございます。
参考にさせていただきます。

サイト内リンクをスライドさせる | egoblock

on 2011年2月17日

[...] Page Scroller カテゴリー: その他   パーマリンク ← Yahoo! Pipes [...]

スマートフォン対応してみた。 | General Information Link Sites

on 2011年4月1日

[...] った。 他のサイトをもう少し見てたら、一部のスムーズスクロールだと上手く動くのが確認できたので、今回はそれで対応。 コリスさんのスムーズスクロールを使わせてもらいました。 [...]

pon

on 2011年4月7日

コリス様

はじめまして。とても便利で素晴らしい動きのスクリプトを公開して下さってありがとうございます。

質問ですが、ページスクロールの動作途中にマウススクロールボタンを使用した際、ページスクロール動作を中止することは可能なのでしょうか？

コリス

on 2011年4月7日

> pon さん

ホイール操作でスクロール動作を中止させることは可能ですが、当スクリプトでは実装をやめました。
※以前の版には実装していました。

これは、ホイール操作はホイールするためのもので、決して中止を意味するものではない、と判断したためです。

シングルページをデザインしました | WebDesigner'smemo　ウェブデザインの基本をメモってみました

on 2011年6月14日

[...] 使って作ってみました。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト [...]

perutoro

on 2011年8月6日

はじめまして。
いつも為になる情報を公開して頂き、ありがとうございます。

このスクリプトもとても使い勝手が良く便利なので、
今回利用させて頂こうと思っているのですが、
『スクロール先の地点をピクセル単位で調整する方法』のデモページで
意図しない動きをする事があるので、確認させて下さい。

http://coliss.com/wp-content/uploads-2011/page-scroller-308/demo-3.html

上記ページから、『h2-01に移動(-30px)』をクリックし移動した後、
マウスホイールを動かすと、画面が上下にぶれ、
正常に移動しない状態です。

WindwsXP SP3

InternetExplorer8
Firefox3.6.18
GoogleChrome12

上記の環境で症状が確認出来ました。

対処法などあれば、お知らせ頂ければ助かります。
宜しくお願いします。

コリス

on 2011年8月6日

> perutoro さん

それはおろらく、スクロール中にホイールを動かす場合だと思うのですが、配付版ではスクロール中の動作はクリックのみスクロールを停止する仕様にしています。
ホイールに実装しない理由は、スクロール中にホイールする動作が必ずしも停止を期待するものではないためです。

perutoro

on 2011年8月7日

こんにちわ。
素早いお返事ありがとうございます。

確かに、スクロール動作が完全に終了した後にホイールを動かした場合、上下にぶれるような症状は出ませんでした。ちょっと検証不足だったみたいです。お手数お掛けしました。

ありがたく、スクリプト利用させて頂きます。
ありがとうございました。

かず

on 2011年8月18日

はじめまして。
jquery.page-scroller-308.jsを使用させていただいています。
今回上記jsファイルを使用することでCSSレイアウトが崩れる
現象に遭遇したので、書き込みさせていただきます。

環境
OS：WinXP
ブラウザ：IE7
使用jQueryバージョン：1.3.2

この環境でjquery.page-scroller-308.jsを使用するとテーブルの
幅が狭まり中央配置になってしまいます。

テーブルのCSSは以下です。

table {
width:100%;
background-color:#CCCCCC;
border-spacing:1px;
}
th,td {
padding:5px;
}

以下省略

th、tdには幅指定はしていません。
ページが表示される際に、はじめ正常にテーブルが表示されたあと、
jsが読み込まれたタイミング？でテーブルの幅がきゅっと縮まります。
jquery.page-scroller-308.jsを利用したときのみ発生します。

現在は強制的にtableの幅とmarginを指定し、なんとか制御しています。

table {
→ width:100%!important;
→ margin:0!important;
background-color:#CCCCCC;
border-spacing:1px;
th,td {
padding:5px;
}

ただ、th、tdのボーダーが表示されないなど、思ったとおりの表現が
できません。

考えられる原因はなんでしょうか？

以上、報告も兼ねて書き込みさせていただきました

コリス

on 2011年8月18日

> かず さん

頂いた情報からだと、原因は特定できませんが、
当スクリプトではレイアウトおよびスタイルシートに影響を与えるものは特にありません。
「!important」での解決やth, tdのボーダーが反映されない、ということから考えられるのは、CSSに何らかの原因があるのでは？　と思います。

かず

on 2011年8月22日

コリスさん

ご返答ありがとうございます。

「CSSに何らかの原因があるのでは？」というアドバイスをもとに、検証してみました。
結果から申しますと、CSSが問題ではなく、JS同士の干渉に原因があるようです。

発生する条件として

・jquery.page-scroller-308.jsを使用している
・ページ内リンクがある
・トラストマーク（のJSファイル）を設置している

の3点です。

同じ条件を満たすユーザーは少なからずいるかと思います。
参考にしていただければ幸いです。

コリス

on 2011年8月22日

> かず さん

トラストマークのJSというのは、jsファイルでセキュア証明を埋め込むものだと思いますが、改めてトラストなど他社の同タイプのものを配置したサイトをXP+IE7環境で確認してみましたが、特に問題はありませんでした。

申し訳ありませんが、テーブルの幅の原因がJSの干渉というのは当方では心当たりがありません。

かず

on 2011年8月23日

＞コリスさん
ご返答ありがとうございます。

ソースが表示されないようですので、テストページを設置しました。

http://xxxx

コリス

on 2011年8月23日

> かず さん

当方では不具合の再現、およびスクリプト自体にスタイルシートを変更するロジックは入れていないため、これ以上コメントを頂いてもアドバイスができません。
併用しているスクリプトや実装方法に問題がないか確認してみてください。また、当スクリプトと同様のスクリプトは多数あるので、他の使用も検討してみてください。

※確認ページのURLは伏せ字に変更しました。

かず

on 2011年8月23日

＞コリスさん
上記の件、了解いたしました。
これからも応援しております。
ありがとうございました☆

本屋＠

on 2011年9月3日

はじめまして。
突然ですが、スクリプトについて質問です。
「横移動有り。縦無し。」の部分なのですが
これを一ページウィンドウ幅に合わせることは可能でしょうか？

コリス

on 2011年9月3日

> 本屋＠ さん

「一ページウィンドウ幅に合わせる」の意図がくみ取れないので、よく分かりませんが、移動する際はアンカー先のエレメントの位置を参照します。
ウインドウの幅に合わせるようにエレメントを配置する、ということになるかと思います。

本屋＠

on 2011年9月3日

お返事ありがとうございます。
すみません、寝る寸前だったので文章がおかしくなってしまいました（汗

「一ページウィンドウ幅に合わせる」ではなく
「１ページ分（エレメント？）の幅をウィンドウ幅に合わせる」です。
auto等をつかえばいいのかと思いましたが、そうすると当たり前ですがレイアウトが崩れてしまいます。

>よく分かりませんが、移動する際はアンカー先のエレメントの位置を参照します。
>ウインドウの幅に合わせるようにエレメントを配置する、ということになるかと思います。

すみません、知識があまりないのでよくわからないのですが、具体的にはどの部分を書き換えれば良いのでしょう？
それとも書き加える必要があるのでしょうか？

コリス

on 2011年9月3日

> 本屋＠ さん

いまいち把握できませんが、
１ページ分の幅をウインドウ幅に合わせるのは、スタイルシートのテクニックで、幅指定に100%を指定すればできます。

本屋＠

on 2011年9月4日

>いまいち把握できませんが、

すみません。
横スクロールスクリプトでは次ページが見える状態だったので
ウィンドウを横に引き伸ばしても、常に画面外になるように設定したかったんです。
やはりご理解いただけないでしょうか？

>１ページ分の幅をウインドウ幅に合わせるのは、スタイルシートのテクニックで、幅指定に100%を指定すればできます。

一番初めにやってみたのですが
100%と設定するとスライドすることなく止まります。
外枠のdivは固定サイズのままで、１ページ分のクラス横サイズを100％に設定しました。
ブラウザはIEです。

長々とすみません
他のスクリプトでなんとか成功したので
そちらで進めたいと思います。
お返事をいただきうれしかったです。
今後もこちらを利用させていただきたいと思います。
ありがとうございました。

スマートフォン対応してみた。 | Cocochi-Feeds

on 2011年9月13日

[...] った。 他のサイトをもう少し見てたら、一部のスムーズスクロールだと上手く動くのが確認できたので、今回はそれで対応。 コリスさんのスムーズスクロールを使わせてもらいました。 [...]

タブ切り替えとぶつからないスムーズスクロール (wald-grun)

on 2011年10月30日

[...] タブ切り替えとぶつからないスムーズスクロール jqueryによるスムーズスクロールは、探せば結構な数あるかと思うのですが、アンカーに対して動作するものが殆どで、同じくアンカーを使って動作するタブ切り替えのスクリプトなんかとぶつかることがないですか？そんなときお勧めしたいのがコリスさんとこのPage Scrollerです。 設置は一般的なjQueryプラグインと同様に、jQueryのjsファイルと、上記よりダウンロードしたPage Scrollerのファイルをヘッダで読み込むだけ。あとはアンカーに対して普通にリンクするのみです。 さて設置はさくっといけるとおもうのですが、前述の通り問題は他のスクリプトと干渉しあうことでした。タブ切り替えのjsなんかでidを使って識別しているスクリプトですと、aタグに#hogeのようなリンクが埋めこまれている場合に反応してしまってタブ切り替えの際に一回スクロールが起こっちゃうなんて微妙な動きになることがあります。 そんなときこのスクリプトは、アンカーリンクをエスケープする処理をクラスで設定することが可能です。 動作しないエリアを設定する方法 ※idがかぶっていてアンカーが効かないので、一個上の項目にリンク張っています。 詳細は上記リンクにありますが、要はclass="nopscr"というクラスをアンカーリンクの入ったaタグに当てるだけ。たったそれだけでOKでした。すごく便利。タブを併用することが多いので、とても助かりました。 このスクリプト色々と高性能で様々な設定ができまして、最新バージョンではスピードの設定もできる・・・はずなのですが、解説に書いてある変数を設定してもそれほど劇的な変化がありませんでした。 スピード以外の動作が完璧でしたので今更他のスクリプトを使う気になれず、申し訳ないのですがコードを読んで、スクロール処理中のとある変数に直接値を代入して対応しました。frmsの値を直に書き換えると、割と目立って動作スピードが 変わります。一応、ご参考までに。 商用利用は最新バージョンから可、とのことですので、お仕事で使用する際にはライセンスにご注意ください。 以上、スムーズスクロールのご紹介でした。 [...]

僕がRSSリーダーに登録してる参考になるWEB技術系のサイト７つ - ゲシュタルト崩壊間近

on 2011年11月15日

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

( jQuery )　ページ内リンクをスムーズにスクロールさせる 【jquery.page-scroller.js】 - サイト制作の豆知識

on 2011年11月30日

[...] ②jquery.page-scroller-306.jsを下記サイトからインストール http://coliss.com/articles/build-websites/operation/javascript/296.html ③書き方は下記コードを参照してください。 [...]

Zackee

on 2012年2月12日

他のjQueryプラグインとの関係で「noConflict」を利用してjQueryオブジェクトを$以外にしている場合、つまり、
$xyz = jQuery.noConflict();
などとしている場合、このプラグインは動作しないのでしょうか。
動作しない場合は、何か回避方法はあるのでしょうか。

jQuery « Web Design MEMO

on 2012年2月29日

[...] ・Page Scroller [...]

中西信乃

on 2012年3月6日

コリス様
思っていた動作を実現できるスクリプトをありがとうございます。
とても勉強になります。

実装させていただいたのですが、
Chrom・FireFoxでは動作するのですが
WinXP　IE8　では、座標が上手く取れないようなのです。

何が原因かわからないのですが
もしかして他のJqueryが邪魔をしてしまっているのでしょうか。

まだ作りかけのサイトですので
実際に動いていない箇所も多々あるのですが、
何かヒントをご教授いただけましたら幸いです。

http://www.test.re-laxdesign.com/nagata/menu.html

コリス

on 2012年3月6日

> 中西 さん

ページを見てみました。
確かに挙動が変ですね。
原因は分からないのですが、ページの下部に大きな余白があるのが気になりました。なにか見えないエレメントがあり、それが原因ではないかと思います。

jQuery Mobile のリンクはクセモノです^^; ｜ ホームページ制作 WEBシステム開発 株式会社ディーアイシー

on 2012年4月9日

[...] ページ内をスルスルってスムーズにスクロールするJS 「Page Scroller ver.3」 を使わせてもらってるのですが、どうしてもこの効果が効かないんです。 [...]

jQueryでページ内リンクをなめらかにスクロールさせられなかったのでWordPress側でなんとかする | LogicA

on 2012年4月23日

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

jQueryでページトップへ | Code Life

on 2012年5月10日

[...] ページ内リンクをスマートにするsmoothScroll.js [JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -P… [...]

top of page

©2011 coliss