iframe内でのスクロールについて

質問

iframeに関する質問です。
iframe内のみアンカーでスクロールしたいのですが、iframe含めページ全体がスクロールしてしまいます。
sampleファイルとして質問したい部分を抜粋したものを下記を記載します。
◆index.html(親html)
◆01.html(iframe含む子html)
↓
◆index.html
<ul>
<li><a href="01.html#Aarea" target="inline">子htmlのAへスクロール</a></li>
<li><a href="01.html#Barea" target="inline">孫htmlのBへスクロール</a></li>
<li><a href="01.html#Carea" target="inline">孫htmlのCへスクロール</a></li>
</ul>

<iframe src="01.html" id="inline" name="inline" width="300px" height="300px"></iframe>

◆01.html
<div name="Aarea" id="Aarea" style="background:#00F; width:300px; height:300px; color:#CCC;">
<p>A area</p>
</div>
<div name="Barea" id="Barea" style="background:#9C0; width:300px; height:300px; color:#CCC;">
<p>B area</p>
</div>
<div name="Carea" id="Carea" style="background:#C36; width:300px; height:300px; color:#CCC;">
<p>C area</p>
</div>

これを実行した際に親であるindex.htmlもスクロールしてしまいます。
以前にも似た質問がされていましたが、対処方法が思っていたものと違っていた為質問自体重複してしまうかもしれませんが質問するに至りました。

完全にiframe内のみをスクロールさせる方法はありますでしょうか。
よろしくお願いします。

回答No.2

n_a_o_11

◆index.html
<ul>
<li><a href="#Aarea" onClick="inline.scrollPageTo(0,300)">子htmlのAへスクロール</a></li>
<li><a href="#Barea" onClick="inline.scrollPageTo(0,600)">孫htmlのBへスクロール</a></li>
<li><a href="#Carea" onClick="inline.scrollPageTo(0,900)">孫htmlのCへスクロール</a></li>
</ul>

◆01.html
<script type="text/javascript"><!--
var isIE = 0;
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;}
function scrollPageMath(start_x,end_x,start_y,end_y){

var distance_x;
var distance_y;
var move_x;
var move_y;
var set_x;
var set_y;

distance_x = (end_x - start_x)/10; // 動かすx幅の比率
if(distance_x > 0)set_x = Math.ceil(distance_x);
else set_x = Math.floor(distance_x) ;
distance_y = (end_y - start_y)/10 ; // 動かすy幅の比率
if(distance_y > 0)set_y = Math.ceil(distance_y);

else set_y = Math.floor(distance_y);
move_x = start_x + set_x;
move_y = start_y + set_y;

if (set_x > 0 && move_x <= end_x || set_y > 0 && move_y <= end_y || set_x < 0 && move_x >= end_x || set_y < 0 && move_y >= end_y){
scroll(move_x,move_y)
start_x += set_x;
start_y += set_y;
setTimeout("scrollPageMath("+start_x+","+end_x+","+start_y+","+end_y+")",1);
}

else return true;
}

function scrollPageOffset(go){
if (go=="go_x")return (document.getElementById) ? document.body.scrollLeft:pageXOffset;
if (go=="go_y")return (document.getElementById) ? document.body.scrollTop:pageYOffset;
}

function scrollPageTo(end_x,end_y){
var start_x = scrollPageOffset("go_x");
var start_y = scrollPageOffset("go_y");
scrollPageMath(start_x,end_x,start_y,end_y);
}
//-->
</script>

<div name="Aarea" id="Aarea" style="top:300px;background:#00F; width:300px; height:300px; color:#CCC;">
<p>A area</p>
</div>
<div name="Barea" id="Barea" style="top:600px;background:#9C0; width:300px; height:300px; color:#CCC;">
<p>B area</p>
</div>
<div name="Carea" id="Carea" style="top:900px;background:#C36; width:300px; height:300px; color:#CCC;">
<p>C area</p>
</div>

CSSで位置決めした所へスクロール
http://www.geocities.jp/n_a_o11/test/test28a.html

回答No.1

naokita

HTMLでは、外部のHTMLファイルまで操作はできない。
HTMLだけで作るなら、各３ページのファイルをを作り、
IDポイントを設定すれば可能。
ただ、普通はそんな事はしないから、
----------------------
<li><a href="01.html#Aarea" target="inline">子htmlのAへスクロール</a></li>
これを、
onclickで、
01.html#Aarea では無く、index.html として、
同時に、iframe の src="01.html" の末尾に #●● をスクリプトで付与する。
これを各アンカーとid別のスクリプトを書く。

<iframe src="01.html#●●" id="inline" name="inline" width="300px" height="300px"></iframe>
----------------------
つまり、
１、クリックしたら、index.html に飛ぶ。
２、ブラウザは当然、index.html上部を表示。
３、index.html内のiframeは、
　　01.html#●● 部分をiframe内上部に表示される。

未検証ですが・・・
当方のFirefox(メイン環境)では、例外を除きiframeを非表示にしている。
iframe内には重要な要素が何一つ無いから・・・