別フレームにスムーススクロールを使用したい。
Javascript初心者です。
自分自身でも色々調べたのですが、どうしても分からないことがあり、お力を貸して頂ければと思います。
http://user1.matsumoto.ne.jp/~goma/js/ps2.html
こちらのサイト様のようにスムーススクロールを使った移動を使いたいと考えております。
上記サイト様で使われているスクリプト等は理解出来ております。
今回、この応用として、
別フレームでスムーススクロールを使用するということをしたいと考えております。
(上記サイト様は、同じページ内での移動ですが、今回はボタン(リンク部分)と移動するページが
それぞれ別フレームになっているものを考えております。)
このようなやり方を紹介しているサイト様、もしくは書籍などご存知でしたら教えて下さい。
もしくは、上記サイト様のスクリプトをどのように応用すれば良いかなど教えて下さい。
どうぞ宜しくお願い致します。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
ちゃんと見ていませんが…
フレームが異なるということはドキュメントが異なることになりますので、ドキュメントオブジェクトを指定できるように変更してあげれば動作するようになるのでは?
ただし、フレームの内容が別ドメインの場合はスクリプトのアクセス制限があるので、動作できないと思われます。
No.2
- 回答日時:
<iframe id="iframe1" src="/hoge.html" ></iframe>
という<iframe>要素があったとして、
そのiframeのWindowオブジェクトは、
var iframe = document.getElementById("hoge");として
iframe.contentWindow で取得可能
よってiframe内のスクロールなら、
iframe.contentWindow.scrollTo(X,Y);
※X,Yはiframe内の移動量
iframe内の要素の取得は、iframe内のdocumenntオブジェクトは、
iframe.contentDocumentで取得可能
※古いIEだと、iframe.contentWindow.documentでよい
よって、
var content=iframe.contentDocument||iframe.contentWindow.document;
とすれば、
content.getElementById("xxx")
の様にiframe内の任意の要素が取得できる。
しかし、取得した要素の高さ・幅や位置(X,Y)の取得は、ブラウザーに
よって方言があり、振り分け方法が煩雑で面倒になる。
さらにバブリングするイベントのIEでの取得は、さらに面倒
iframe.contentWindow.document.attachEvent('onclick', function(){
alert(iframe.contentWindow.event.clientX);
});
よって、無理にiframe内のDOMを操作するよりは、iframe内のHTMLにも
親と同じjavascriptライブラリーをロードしておいて、親のjavascript
から、子供のjavascriptを操作するようにした方が楽じゃないかな。
No.3
- 回答日時:
幸い単純なスクローラーの仕組みだったみたいで、楽な方法で出来ますね。
<iframe id="iframe1" name="iframe1" src="target.html"></iframe>
があったとして、iframeに表示する「target.html」の<head>要素にでも
<script type="text/javascript" src="/ps2.js"></script>
を加えてロードさせておく。
親からのリンクの<a>要素は、ちょっと長いけど
<a href="#foo" onclick="return document.getElementById('iframe1').contentWindow.ps2.scroller(this);">
iframe内の#fooへスクロール</a>
で、出来ました。
No.4
- 回答日時:
質問の画像を良く見ると、別に<iframe>でも<frameset>でも無さげだ。
そもそも、フレーム要素とは誰も言ってない。早とちりか!
単なる<div>ボックスのスクロールでよかったのかしらん?
となるとこのライブラリーはアンカーめがけてスクロールするだけだから
使えないよ。別の仕組みを作るか、探すかしないと...
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP $_SESSIONに渡した後はそのまま使っても問題ありませんか? 3 2022/11/08 22:17
- C言語・C++・C# 【C++】IDirect3DSurfaceのディープコピーは可能ですか? 1 2022/07/06 02:47
- Excel(エクセル) ExcelのFSO(ファイルシステムオブジェクト)について学びたいのですが。。。 5 2022/12/15 18:06
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- au(KDDI) 特定の画面を見るとスマホが固まります ご覧頂き有難うございます。 特定のページを見るとスマホが固まり 1 2023/08/21 19:29
- その他(音楽・ダンス・舞台芸能) この動画のBGMがダウンロードできるサイトと曲名を知りたいです 2 2023/06/07 06:44
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Safariで<iframe>のinnerHTMLを...
-
上と左にフレームわけされてい...
-
エラー:書き込みができません ...
-
別フレームへのリンク文字上で...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
JavascriptとJqueryを混在し記述
-
Dreamweaver で 外部JSを読み込...
-
pythonのWebスクレイピングでfi...
-
条件分岐で、読み込む外部スク...
-
bodyにidをつける理由は何ですか?
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
-
リンクをクリックすると文字が...
-
jqueryでのkeydownイベント発生...
-
ウィンドウ名の設定
-
擬似フレーム
-
Mac IE でスクリプトエラー
-
<FORM ACTION= をつけると「宣...
-
onloadで2つの関数を設定したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
フレームを跨ぐドロップダウン...
-
子フレームの自動リロードは可...
-
別ページのインラインフレーム...
-
インラインフレームをドラッグ...
-
<iframe>~</iframe>内のwindow...
-
親フレームのURLによって、...
-
jqueryを利用してインラインフ...
-
エラー:書き込みができません ...
-
submitボタンで他のフレームを...
-
親フレームからkeydownイベント...
-
フレームでの右クリック禁止
-
別フレームの中にあるインライ...
-
フレームが入れ子状態です。フ...
-
別画面の関数の呼び出し
-
ワンクリック、ダブルウインド...
-
チェックボックスのチェックを...
-
親ウィンドウの別フレームを子...
-
フレーム分割すると動かない
おすすめ情報