「iframe内ページ」の「ページ内移動」

質問

■現在しようとしていること
---------------------------------------
index.html＝「Ａ」/ calender.html＝「Ｂ」
iframeは「Ａ」の中ごろにあります
---------------------------------------
１）親ページ「Ａ」のiframeで「Ｂ」をよみこませる
〔補足※iframeのサイズはwidth:500×height:200〕
２）「Ｂ」には1月～12月までのカレンダー表がタテに並んでおり、iframeでの表示範囲は１ヶ月分だけ見えるようにする
〔補足※１ヶ月のカレンダーの縦は200px〕
３）「Ａ」を読み込んだ時点で、「Ｂ」の特定の月の部分のみ指定で見えるようにしたい（自動で変わるのでなく手動で変える）
４）「Ｂ」のページは、各１ヶ月（200px）ごとにページ内移動でき、「▲last」「▼next」で前後のカレンダーにジャンプする
---------------------------------------
■現在の記述
◆親：Ａ側
<iframe src="calender.html#200705" width="500" height="200"></iframe>
◆フレーム内：Ｂ側
<p><a href="#200704" target="_self">▲LAST</a></p>
<p><a name="200705"></a>2007/MAY 5</p>
<p><a href="#200706" target="_self">NEXT▼</a></p>
---------------------------------------
■現在の状況
・「Ａ」を開いたとき
・「Ａ」から「Ｂ」内のページ内リンクを操作したとき
以上のときに、iframeを指定しているページの中腹あたりをページの先頭としてしまう。（「Ｂ」内の特定箇所をはじめに表示させることはできているが、ページの先頭がページ「Ｂ」の先頭になっている）
---------------------------------------
どのようにすれば、常にページの先頭をページ「Ａ」の先頭にしておくことができるでしょうか？
どうぞよろしくお願いいたします。

回答No.2

venzou · ベストアンサー

＞「indexを開いたときにiframe内ページをページの途中から表示させる方法」

index.html側から操作する事も可能かもしれませんが、
calender.html側で処理した方が楽だと思います。

window.onload = function(){
var today = new Date();
window.scrollTo(0,today.getMonth()*200);
}

こんな感じで、calender.htmlのonloadイベントを使います。

------------------------------------------
ついでに、細かい所ですが、説明しておきます。

＞function next() {window.scrollBy(0,200);void(0);}
function next() {window.scrollBy(0,200);}

ここにはvoid(0)は不要です。詳細は下記。

＞<a onClick="next()">NEXT ▼</a>
<a href="javascript:void(0)" onClick="next()">NEXT ▼</a>

void(0)を書く必要があるのは、hrefの中です。

hrefを付けると、「NEXT ▼」がリンクの表示（通常は青色で下線付き）になり、リンクであることが分かりやすくなります。

hrefを付け、void(0)を書かないと、違うページに飛ばされる場合があります。

void(0)とは、値を何も返さない　→　ページを変更しない

という、意味合いです。

------------------------------------------
さらに細かい指摘ですが、カレンダーのスペルはcalendarですよ。

お礼

カレンダー側から操作するということを全く思いつきませんでした。
おかげさまでとても助かりました！
無事、思うとおりに動作させることができました。
しかも毎月月がかわるたびに表示位置を指定しなくてすむ方法をお教えいただきましたので、更新も負担がかからなそうです。

カレンダーのつづりも直しました。ちょっとしたところで教養のなさがでてしまいお恥ずかしいかぎりです。

void(0)に関するご説明も大変勉強になりました。
これからも自分でもっと理解を深めていこうと思います。

このたびは本当にどうもありがとうございました。

回答No.1

venzou

カレンダーの高さが決まっているのであれば、scrollTo()でスクロールさせるとか、どうでしょう？

<a href="javascript:window.scrollTo(0,0);void(0);">▲LAST</a>
2007/MAY 5
<a href="javascript:window.scrollTo(0,400);void(0);">NEXT▼</a>

お礼

とても素早いご回答ありがとうございました。
アドバイス、とても参考になりました。javascriptのことはあまりわからないのですが、ご提示いただいたソースを参考にあれから調べて下記のようにすることにいたしました。無事上手くできました。
----------------------------------------------------
function next() {window.scrollBy(0,200);void(0);}
function last() {window.scrollBy(0,-200);void(0);}

<a onClick="next()">NEXT ▼</a>
<a onClick="last()">▲ LAST</a>
-----------------------------------------------------
よろしければ、もう一つの問題である「indexを開いたときにiframe内ページをページの途中から表示させる方法」もご存知でしたらアドバイス頂ければと思います。
どうぞよろしくお願いいたします。