- 締切済み
別ページの指定した座標(x.y)へリンクしたい
はじめまして http://okwave.jp/qa/q751783.html で、既に質問されている方とほぼ同じ内容の質問です。 上記質問では一見解決がなされておらず、参考にしたくとも当方でも結局出来ませんでした。 よって、改めて、私の問題点を率直に質問をさせて頂こうと思います。 http://freeeeeze.web.fc2.com/scrollin/scroll.html 上記URL、こちらに、つたないながらうまく行かないで困っているhtmlを置いてあります。 要は、パララックスに興味を持ち「skrollr-master」を素に作り始めましたが ページ内のリンクは「<a onclick="window.scroll(0,1000);" />●●</a>」で解決したのですが、リンクした別ページのページ途中(例えばスクロール量4000の座標)への設定がどうしてもできません。 <SCRIPT language="JavaScript"> <!-- function OpenWin1(){ win=window.open("link01.html","_top"); win.scroll(0,500); } // --> <!-- function OpenWin2(){ win=window.open("link01.html","_top"); win.scroll(0,4000); } // --> <!-- function OpenWin3(){ win=window.open("link02.html","_top"); win.scroll(0,500); } // --> <!-- function OpenWin4(){ win=window.open("link02.html","_top"); win.scroll(0,4000); } // --> </SCRIPT> http://okwave.jp/qa/q751783.htmlで紹介されている内容が使えるかなと思い 上の様なものを真似て書き、 <a href="javascript:OpenWin1()">●●</a> からリンクをとやってみたのですが、うまく行きません。 見よう見まね、パクったり、繋ぎ合わせたり、素人がちょっと無理な事に首を突っ込んで いる感じなのですが、 ペラ1のパララックスを作ってみるという、課題をなんとかクリアしたく、 どうか、お知恵ある方々にアドバイス頂ければと思い質問させて頂く事にしました。 何となく、htmlやcssやjavascriptを使っているレベルです。 今回「bootstrap」も使ってスマホ対応という課題も課してやってみています。 いろいろ、理解をしてやっているのではないので ご面倒かと思いますが、できるだけ噛み砕いてご教示頂けると助かります。 もちろん、htmlを書き直して頂いて示して頂けるに越した事はありません。 何卒、どうか宜しくお願い致します。
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- mpro-gram
- ベストアンサー率74% (170/228)
scroll.html のページ内に インラインフレームを置いて、インラインフレーム内には「link01」や「link02」のどちらかを表示するんですよ。 前回示したhtml 記述を全部scroll.html内に記述してみてください。
- mpro-gram
- ベストアンサー率74% (170/228)
相手先ページが同じなら、iframe 内に読むことにしたとして、以下のようなjavascript linkをおいて、先にiframeにページを読んでおくと直ぐ飛べる <a href="javascript:window.frames['inline_frame'].scroll(0,1000);">y 1000</a> <a href="javascript:window.frames['inline_frame'].scroll(0,4000);">y 4000</a> <iframe src="list01.html" name="inline_frame" width="600" height="500"></iframe> ページ読替用は、さらに別にリンクを置いておく、こっちは通常リンクにtarget 指定のみ <a href="list02.html" target="inline_frame">list02.html</a> ページを読み替えても、iframeに対してscroll動作が行われるので、上記scriptも動く 要は、ロードとスクロールを切り離してしまうのがもっとも簡単。
お礼
回答、ありがとうございます。 素人の質問にお付合い頂き大変恐縮しております。 「onload を待たせる方法」を探してみてもちょっと見つからず困っていたので助かります。 是非、ご回答の内容で進めてみたいと思うのですが、 http://freeeeeze.web.fc2.com/scrollin/scroll.html ページを全部(あるいは表示したい範囲を) iframe で囲って「scroll.html」の内容も「link01」も「link02」も iframe 内に表示してしまうということでしょうか? なんだか、間違った解釈しているようで不安なんですが、 ちょっと、やってみようと思います。 誤解釈があるようでしたら、大変恐縮ですがご指摘いただけると幸いです。
- mpro-gram
- ベストアンサー率74% (170/228)
> win=window.open("link02.html","_top"); target _top ということは、現在window のページが切り替わってしまいますので、元のページのJavascript は消去されて存在しませんので、無理です。 別のframe か window、または iframe などへ開くなら、元ページが残るのでなんとか、それでも、すぐに実行しようとしてもページロード前では、scroll出来ないので、onload を待って実行させるような工夫が必要。
お礼
回答、誠にありがとうございます。 target _top でやろうとする限り、このやり方は間違ったアプローチだったと いうことですね。 ページが切り替わるとJavascript は消去されるというのは、Javascript をよく解っていない事を露呈してしまってますね。 大変勉強になりました。ありがとうございます。 ただ、まだ、この状態からでも工夫次第でなんとかなるとのこと。 複雑過ぎると付いて行けなくなるかも知れませんが、 是非とも実行させたいと思っています。 「onload 」を待たせる方法探してみますが。 もし、良い方法、思いつかれる様でしたら、是非お教え頂きたいと 思っております。 宜しくお願い致します。
お礼
mpro-gram 様 誠にありがとうございました。 いろいろやってみたのですが、 どはまりしてしまいました。 インラインフレームを設置してみましたが 私のやり方がおかしいのか、 インラインフレームの中のスクロールがおかしなことになり 見直しているうちに更におかしくなってしまいました。 一旦、落ち着いてから まったく別な方法を試したところ 意外とすんなりうまくいってしまいました。 ページを遷移させてから、スクロールの動きを指示する スクリプトを設置する方法をいろいろ探した結果 それがはまりました。 いろいろアドバイス頂いたのに 私の知識不足、理解不足でご提案を活かせなかったことを お詫びするとともに大切なお時間を割いてお答え頂いたことに御礼申し上げます。 また、落ち着いたらインラインフレームとスクロールの関係についてやり直してみたいと思っています。 ありがとうございました。