• 締切済み

リンククリック時 ターゲットフレームの自動スクロール

左右にフレームで分けたHTMLファイルがあります。 左のフレームにはリンク集があります。 その中のあるリンクをクリックしたときに、 右のターゲットフレームにリンク先のURLを描画させています。 例えば<a href="http://www.xxx.html" target="frame_right"> のような感じです。 リンクをクリックして、描画したターゲットフレームの内容を、自動的に100pxだけ下にスクロールするようにするにはどのようにしたらよいでしょうか? もとのフレームセットのHTMLか、もしくは左フレームのリンク集の部分にJavaScriptを記述して実行したいと考えております。 ご教授よろしくお願いします。

  • ymac
  • お礼率66% (2/3)

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

「もとのフレームセットのHTMLか、もしくは左フレームのリンク集の部分にJavaScriptを記述して実行」の一例です。 ============================== 「左フレームのjavascriptとリンク部分」 <script type="text/javascript"> <!-- function change(url,scl){ top.scl = scl; top.right.location.href=url; } // --> </script> -------------------------------- <a href="about:blank" onclick="change('タ-ゲット.html',100);return false;">タ-ゲット</a> ---------------------------------- ============================== 「フレームセットのjavascriptとリンク部分」 <script type="text/javascript" charset="utf-8"> <!-- var scl; function right_load(){ if(scl){ right.window.scrollTo(0,scl); } } // --> </script> <frameset cols="200,*" frameborder="no" border="0" framespcing="0"> <frame src="サイドメニュー.html" name="left"> <frame src="about:blank" onload="right_load();" name="right"> </frameset>

ymac
質問者

補足

お返事が遅れて済みません。 早速のご回答ありがとうございます。 やってみて、確かにできました。 ありがとうございます。 しかし、私の説明が足りなかったようです。 開きたいページは、外部のURLであり、内部HTMLファイルではありません。 たとえば、ご提案いただいたソース内の「ターゲット.html」のところが、 例えば http://www.yahoo.co.jp のようなものです。 そういう場合はこのスクロールは出来ないのでしょうか? もし、お付き合いいただければ、教えていただけると大変助かります。 まずはここまで丁寧にご回答いただきましたことに、 本当に感謝申し上げます。 ありがとうございます。

関連するQ&A

  • フレームとスクロール

    frameset により、フレームを左右に分割し、左にメニュー、右にコンテンツを表示しました。 メニューフレームに <a href="・・・・.html#a" target="content">A として、コンテンツフレームに <a name="a"> を設定すると、メニューフレームの「A」をクリックすると、コンテンツのフレームは 「A」のところまでスクロールします。 これを、少し変化させて、 「A」をクリックすると、右スクロールバーを一回クリックしたのと同様に、下に隠れていた 続きの部分が上に移動して表示されるようにしたいのですが、・・・。 HTLMで、こういった処理が可能でしょうか。可能でしたら、教えていただきたいのですが。 不可能でしたら、あきらめます。よろしくお願いします。

    • ベストアンサー
    • HTML
  • ワンクリックで二つのフレームを動かしたい

    こんばんは。 今、frameを使ってページを左右に分けています。 左がleft、右がrightとしていますが、左側のリンクをクリックして、左右のフレームの内容を目的のページに移動させることは出来ますでしょうか? イメージとしてはしたの通りです。 1.左側の「キャンディの作り方」をクリック。 2.左側のフレームを「candy.htm」に移動。 3.右側のフレームを「candytop.htm」に移動。 手元にある本で調べたのですが、わからずに質問させていただきました。C言語とマクロは少しわかりますが、Javascriptはまだわかりません。HTMLだけで出来ますでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • フレームのターゲットについて

    ホームページ作成のHTMLについて教えてください。 三つのフレーム構成でページを作成し、各フレーム名を付けました。 コンテンツをフレーム名「mainFrame」に表示させたく、ターゲットで指定してもなぜか別窓が開いて表示されます。 試しに「_blank」「_top」などを試したら、これは正常に動きました。 原因がお解かりになるかた、宜しくお願いします。 記述しているHTMLはこちらです。 <frame src="main.html" frameborder="no" scrolling="NO" noresize id="mainFrame" /> <a href="***.htm" target="mainFrame">リンク</a> 宜しくお願いします。

  • フーレムを使わないターゲットリンク

    ホームページのあるリンクをクリックすると 特定の区画だけのページを変えるようにしたいのですが (フレームであれば<a href="URL" target="フレーム名">のこと) 全体ページでいちいちスクロールバーを表示したくないのでフレームを使いたくありません。 (真ん中あたりを変えたいのでフレームで分けるとスクロールバーがいっぱいに) スタイルシートやJavaで特定の場所を指定して変更することはできますか? もしくはフレームを使ってもスクロールバーが出ないようにできますか?

    • ベストアンサー
    • HTML
  • ターゲットフレームについて教えてください。

    フロントページを使っています。元々上下に3分割されたフレームの真ん中部分に、さらに左右に2分割したフレームを入れたいのです。左部分をコンテンツにして、リンク先を右部分に表示したいのですが、ターゲットフレームを右部分のフレーム名にしてるのに、どうしてもリンク先を表示させると左部分が残らず、元々の上下のフレームしか残りません。教えてください、よろしくお願いします。

  • すべてのリンククリックでtargetを指定するワザ

    すべてのリンククリックでtargetを指定するワザはないでしょうか。 上部Aフレームと下部Bフレームに分かれているページで、Bフレームでリンクをクリックすると、それぞれのリンクでtargetを指定しなくても、すべて target="_parent"で開くなどの設定をjavascriptでできないものでしょうか。 「できない」という断言も歓迎!!

  • クリックするとするするとスクロールさせたい(JS)

    Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか? <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }

  • 自動リンク(a href)でフレーム解除方法

    いつもお世話になっております。 HTMLのカテゴリかな?とも思いましたが、今書いているのがASPですのでここで質問させていただきました。 フレームで構成されているページ(上下2分割)より 自動ジャンプ(?)でフレームを解除して、 あるページへとリンクさせたいのです 今は Response.Write "<meta http-equiv=""refresh"" content=""1;URL='main.asp?id=10 target=_top"">" ↑とやってみましたがうまくいきません。 単純にリンクを張る Response.Write "<a href=""main.asp?id=10"" target=_top>メイン</A>" っていうのはうまくいきました。 可能であれば下記も同じようにジャンプさせたいです(こちらはボタンを押したとき) Response.Write "<input type=""button"" value=""メイン"" onClick='JavaScript:location.href=""main.asp?id=10""'>" そもそもこんなんASPじゃできねーんだよ! XXXXXならできるけどなー。 などのアドバイスでも構いません。 どうぞよろしくお願いします。

  • フレームのリンクのやり方を教えてください

    上下のフレームつきのHPを作成しました。 上に画像アイコンを並べて、 それをクリックしたら、下のページにそのURLが出るようにしたいのですが、うまくできません。 ちなみにテキストリンクなら成功しました。 その時のタグが <a href="http://www.~.html" target="上フレーム名">テキスト</a> です。 ちなみに画像アイコンの方は <a href="http://www.~.html" target="上フレーム名"> <img src="画像URL"></a> で、画像リンクのタグにtargetを加えただけのものです。 たぶんこれが間違ってると思うのですが、 どうしたらうまくリンクできるでしょうか? 教えてください。 よろしくお願いします。

  • リンク先をフレーム(+フレーム内の1つを別々のページへ)

    タイトル通りなんですが、 あらかじめ、frame.htmlという 上と左右に分割されたページ (上はtop.html、左はleft.html、右はright.html) があるとします。 で、index.htmlから1~3までのリンク先があり、 そこをクリックすると、frame.htmlの top.htmlとleft.htmlだけ同じファイルを呼び出し、 right.htmlの部分だけ各1~3のページを 読み出す事はできるのでしょうか? 1~3.html用にそのフレームページを3つ作れば早いのですが どうにかして、frame.htmlの「right」だけを各リンク先のページに 切り替えるという、1つのファイルで賄いたいと思っております。 宜しくお願い致します。