1:34いつも拝見させていただいております。横スクロールする際にも、現在地がわかるようにclassか何かを振りたいと思っているのですが、未熟なものでどの部分をカスタマイズすればよいかがわからず。よろしければご教授いただけないでしょうか。23:39>ペペさんコメントありがとうございます。当記事のスクロールスクリプトをご活用いただいている様で嬉しく思っております。横スライドの現在地の状態についてですが必要な場面が多くありそうでしたのでアクティブなスライドに対して「.activePanel」のクラスが付くように記事内のスクリプトを調整してみました。サンプルファイルと共にご確認いただければと思います。12:57jQueryOnePageScrollを使用してサイトを作成中です。完成に近いのですが、プリントアウトするとcssがはずれてしまうのですが、これはjQueryOnePageScrollと関係があるのでしょうか?今回のサイト作成が初めてで、JavaScriptはいまいち理解しておりません。jQueryOnePageScrollが原因で有る場合は、簡単な言葉でご教授願います。2:23>樋口みちよさんコメントありがとうございます。「プリントアウトするとcssがはずれてしまう」とはどのようなことを仰っているのかがはっきりとは分からないのですが印刷に関しては当スクリプトは関係ないと思われます。印刷する際のブラウザのデフォルトの状態で背景色や背景画像を印刷しない設定になっていることでCSSが効いていないとご判断されているのではないでしょうか。背景」などでGoogle検索するとCSSで印刷に関しての記事がたくさん出てくると思いますので参考にしてみてください。16:59まさにこんなJSを探してました!ありがとうございます!1点質問なのですが、このJSはIE7も対応させることは可能でしょうか?すでにIE7は切り捨ててもいいと思うのですが...何卒宜しくお願いいたします。13:13>Kさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。IE7(IE6)に関してはもう動作確認はしておりません。IE7で動作することが必須であればお手数ですが他のプラグイン等をご検討ください。17:05探していたjsが見つかってよかったです。17:27何度もすいません。普通にリンクを貼ったら、スムーズにスクロールして遷移しました。素晴らしいスクリプトです。実装を引き続き試してます。ありがとうございます。1:23いつも勉強させて頂いています。ありがとうございます。各stageごと、cssで背景画像をcover設定すると、パソコンではウィンドウサイズにフィットするものの最後のstage以外はiphoneやipadでフィットしてきません。(iphoneやipadでも、コピーライトがおいてある最後のステージだけは背景画像のcover設定が活きています)各stageのコンテンツは、画像を均等に並べたりgooglemapを埋め込むなど特に珍しいことはしていません。背景をリサイズしメディアクエリなどで対応しようと試しましたが、うまくいきませんでした。した現象はスクリプトまたは既存のcssになにか影響されているのでしょうか。0:30>ユーグレナさんコメントありがとうございます。当記事のスクロールスクリプトをご活用いただいている様で嬉しく思っております。CSSの指定に関しては当記事のスクリプトは特に影響しないのではないかと思っているのですがサンプルデータでも同様の現象が起こっているのでしょうか。実装後に起こっていることであればテストURL等お知らせいただければ調査も出来るかと思っております。16:30はじめまして。jQuery関連のプラグインを検索していて、こちらにたどり着きました。古い時代のHTMLしか触った事がないので、サンプルがあるのは大変助かります。そこで一つ質問があります。src=”xxx.js”></script>と記述するだけでは動かないのですが、どうすれば外部ファイルを読み込ませることができるのでしょうか?お手数ですが教えていただければ幸いです。0:14>さびのらさんコメントありがとうございます。このスクロールスクリプトをご検討いただいている様で嬉しく思っております。外部ファイル化する場合はその様な構成にしていただくことで問題なく動作すると思います。うまく動作しない場合はjQueryファイルがきちんと読み込まれているか外部ファイル化したJSファイルへのパスが合っているかなど再度確認してみてください。13:16回答ありがとうございます。パスなど確認しましたが、それでもやはり動かないようです。src=”jquery.onepagescroll.js”></script>を追記しました。index.htmlとjquery.onepagescroll.jsはUTF8NとSJISで保存してあります。#ローカル環境、IEとsafariで行っています。1画面スクロールのお話しとは違う質問ですので、お手すきの時にでも教えていただければと思います。自分でもう少し調べてみます。以上、宜しくお願い致します。1:08>さびのらさん参考までにスクリプトを外部ファイル化したデータを用意しましたので下記URLよりご確認ください。http://black-flag.net/devel/jQueryOnePageScroll/jQueryOnePageScrollFile.zipIEの場合、ローカルでページを表示後スクリプトを実行させるボタンをクリックしないと動作しないのでその辺りもご注意ください。13:58初めまして、手羽チキと申します。上記のコードを利用させていただいて、新たにサイトを構築しようと考えています。それで、少しClassの名前を変更させて使ってみようかと考えたのですが......。ClassのstageBaseやstageSlideの「stage」のところを「page」に変えてみたところページの上は上手く行くのですが下に移動する際に1段ずれて下に行くことがわかりました。原因としては「setHash」のところも「page」となっていたからのようです。恥ずかしながら、なぜ「page」ではダメだったのか。わからないので、こうなのでは?という解答をいただけないでしょうか?よろしくお願いします。1:04>手羽チキさんコメントありがとうございます。当記事のスクロールスクリプトをご検証いただいている様で嬉しく思っております。ご質問いただいた件についてですが修正した際のデータがどのような形になっていたのか見れていないので何とも言えないのですがただクラスを変更するだけでは特にスクリプト動作には影響しないと思っております。しても動作しない場合はクラス名を変更せずにそのままでご使用いただけると幸いです。22:04はじめまして。前世代のWebから脱皮しようと勉強中です。BlackFlagさんのページは分かりやすく勉強にとてもありがたいです。ありがとうございます。このスクロールスクリプトもとても洗練されていてきれいですね。これを頂いてブログに活用させていただきたいと思ってダウンロードさせていただきました。この中で少しカスタマイズしたいと思っているのですが、私の知識ではどうにもうまく動かないため、ご教示いただきたくご連絡しました。私の希望では、1ページ目の中にフロートでグローバルメニューを設け、ファーストビューでは1ページ目の中か画面下部に表示されていて、ボタンで下のページに移動した場合は、スクロールしてもブラウザウインドウの上辺に固定されて見えなくならないようにしたいというものです。1ページ目に戻った場合は、ファーストビューの位置に戻ると良いと思っています。(ご提供スクリプトで用意されている■のナビは位置関係の目印にしたいと思っています。上記のように固定されず、1ページ目と一緒に消えてしまいます。ド厚かましいお願いということは重々承知なのですが、誠に恐縮ですがこのメニューを実現するためのポイントや方法をご教示頂けないでしょうか?なお、ブラウザはブログユーザがPCの素人のため、CromeやFFは入ってないことからIE8を想定しています。14:02はじめまして、このスクリプトを使用してサイトを制作しようと思っている者です。質問なのですが、画面右と下に表示される四角いメニューは、ひとつひとつ異なる画像にすることは可能でしょうか?「TOP」「ABOUT」「LINK」...など、一目でどの項目に飛べるかわかりやすくしたいのです。お忙しいところ恐縮ですがよろしくお願いします。2:03>masaさんコメントありがとうございます。当記事のスクロールスクリプトをご活用いただいている様で嬉しく思っております。ご質問いただいた件についてですが当記事のスクリプトだとページのスクロール位置は最上部「0」の値から変わらない構成になっているので「#container」の「top」の値を見て、メニューの位置を制御することになるかと思います。メニューの位置固定するには「#container」の「top」の値をみてメニューブロックの「position」を「absolute」や「fixed」を切り替える形になるかと思っております。複雑なスクリプト制御が必要になるかもしれませんがお試しください。2:10>みかこさんコメントありがとうございます。このスクロールスクリプトをご活用いただいている様で嬉しく思っております。メニュー部分の見た目についてはブラウザの開発ツールなどでメニュー部分のソースを見ていただくと分かると思いますが「pagePn1」~「pagePn5」といった形で一つひとつ個別にクラスがつくようにしてありますのでCSSで背景画像などを使って見た目を変える作りになっております。(横スライド用のメニューも同じです)お試しください。14:16初めまして。今回このUIを使用させていただきました。素晴らしいもので使用しておりましたがPC、スマートフォンでの稼働は問題ありまでした。Surfaceでの仕様をしたところフリック操作でのスクロールが認識しない状態でした。スマートフォンでは認識してスクロールをしたのですが・・・。お手数ですが、解決策のご教授宜しくお願いいたします。14:44すいません解決いたしました。2個対策した結果大丈夫でした。1.viewportをCSSの方へ記述2.イベント名をMS独自のイベント名へ書き換え3.1本指ではなく2本指でフリックするお騒がせしました。ありがとうございます。今後とも使用させていただきます。13:11>TPさんコメントありがとうございます。当記事のスクロールスクリプトをご活用いただいている様で嬉しく思っております。Surfaceでの検証(想定)については行っておりませんでした。対策について今後の参考にさせて頂きます。ありがとうございます。10:56はじめまして。こちらの記事を参考にさせて頂いて、自己のホームページを作成しております。ありがとうございます。ご質問がございましてコメントさせて頂いております。初めの1ページのみをこの動きにして、1ページ(1回のスクロール)が終わると2ページ目に入ったところからは通常のスクロール(ホイールした分だけスクロールされる)にすることは可能でしょうか。1回目のスクロールだけにアクセントを付けて、それ以降は続いたページにしたいと考えております。スクリプトの157行目マウスホイールイベントの「:animeted」の指定を「#stage1:animeted」にしてみたところ動きは思ったとおりにならず、初心者のため他の方法が思い浮かばずにいます。お時間があります際で結構ですので、お返事・アドバイスを頂けましたら幸いです。11:49素晴らしいスクリプトをありがとうございます!見た瞬間に気に入ってしまい、自分の技量も考えずにすぐにサイト構築し始めてしまいましたがなんとも初歩的なところでつまってしまいました。恥ずかしながらjavascriptについて詳しくないので質問させていただきたいと思います。一方で「内部リンク」への設定方法がわかりません。stage5【スライドエリア2】が画面に表示されていてそこから(1)stage1(スライドエリアが無い場合)へジャンプ(2)stage3【スライドエリア3】(スライドエリアが有る場合)へジャンプさせる場合には、どのようにhtmlに記述すればそのテキストをクリックしてジャンプするようになるのでしょうか?私のやりたい事は、stage1の上部(ヘッダー部の直ぐ下)にプルダウンメニュー型の「グローバルナビ」を設置したので、こちらのナビからいろいろなページに「内部リンク」としてジャンプさせたいのです。お忙しい中、基本的な質問で本当に申し訳ございませんが、どうぞよろしくお願いいたします。1:03>Ayakoさんコメントありがとうございます。当記事のスクロールスクリプトをお試しいただいている様で嬉しく思っております。ご質問いただいた件についてですが当記事のスクリプトではその様な動作を想定した構成にはしていないので少々厳しいかと思っております。こちらのスクリプトが理想とされている動作に少しだけ近いものになるかと感じておりますのでカスタマイズ等することで組み込めるかもしれません。ご確認いただけると幸いです。1:20>ヒロさんコメントありがとうございます。このスクロールスクリプトをご活用いただいている様で嬉しく思っております。このような記述になります。因みに指定が可能なのは縦スクロールする範囲のみになりますので横スライド画面の特定のページへのリンクは別途スクリプトを作る必要があるかと思っております。