人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

リンクボタンをクリックすると、別ページへ飛んだ後、div内該当IDまでスクロールダウンされるJavascriptを探しています。当初iframeを使用していたのをやめて、div内コンテンツをスクロール表示するように変更したのですが、リンクに飛べてもスクロールダウンできるJavascriptが見つかりません。リンク先に記述すべきJavascriptを教えていただけると助かります!<(_""_)>
<参考>
※iframeではこれで正常稼働。#Aのiframeまで+#BのIDまで の2段階でスクロールする
リンク先ページ
ーheadタグ内ー
<script type="text/javascript">
$(function(){
var param;
param = self.location.search;
param = param.substring(1, param.length);
$('#A').load(function() {
if (param != "") {
var target = $('#A').contents().find("#"+param);
$('body,html').animate({scrollTop: $("#A").offset().top }, 800, 'swing');
$('body,html', $('#A').contents()).animate({scrollTop: target.offset().top }, 800, 'swing');
return false;
}
});
});
</script>

ーbodyタグ内ー
<div>
<IFRAME src="cont.php" id="A" scrolling="yes">

ーcont.phpのbodyタグ内(※わかりやすさのためここに表示)ー
<div>
<p id="B">リンク先</p>
</div>

</IFRAME>
</div>

●質問者: m0r1y055tan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kurowizumatome
●0ポイント

javaを使わずに間単に出来る方法を教えます。

飛びたい箇所に
<a name="任意の文字"></a>
を書きます。

リンクを張るときに
<a href="リンク先のURL#任意の文字">リンク先のページの名前</a>
とするだけです。

任意の文字は、半角でも全角でも大丈夫です。


例 (A記事のURLはhttp://q.hatena.ne.jp/1418144274であったとする)

A記事の飛びたい箇所に記入
<a name="ここ"></a>


B記事に

<a href="http://q.hatena.ne.jp/1418144274#ここ">A記事のここに飛ぶ</a>
を書くだけ。


m0r1y055tanさんのコメント
kurowizumatomeさん 文字数制限があるので質問の書き方が足りなかったのですが、別ページへのリンクではなく、リンクへ飛んだ後のスクロールダウンのアニメーションが欲しかったのです。でもご回答いただき感謝です。ありがとうございました。(*´∀`*)

2 ● a-kuma3
●100ポイント ベストアンサー

質問のコードに合わせて書くと、こんな感じでしょうか。

$(function(){
 var param;
 param = self.location.search;
 param = param.substring(1, param.length);
 if (param != "") {
 var target = $("#"+param);
 $('body,html').animate({scrollTop: $("#A").offset().top }, 800, 'swing');
 $("#A").animate({scrollTop: target.offset().top }, 3000, 'swing');
 return false;
 }
});

外側と内側のアニメーションの時間が同じだと、内側がアニメーションしているのが見られないと思います(なので、上記のソースでは、内側の時間を大きくしています)。
もしかすると、アニメーションは無くても良い、ということでしょうか。
であれば、こんな書き方もできます。

$(function(){
 var param;
 param = self.location.search;
 param = param.substring(1, param.length);
 if (param != "") {
 $("#A")[0].scrollIntoView(true);
 $("#" + param)[0].scrollIntoView(true);
 }
});

m0r1y055tanさんのコメント
a-kuma3さん ありがとうございます!文字数制限があるので質問の書き方が足りなかったのですが、おっしゃる通りスクロールダウンのアニメーションが欲しかったのです。リンク先に飛んだ後、div内に記述されたidリンクまでのスクロールダウンを視覚的に見えるようにしたかったのです。(*´・∀・)上部のJavascriptを使用してみましたが、何故かうまくいかず、直接リンク先に飛びました。(´,,?ω?,,`) 800の数字は時間だったのですね。pxかと勘違いしてました。もう少しGoogleしてみます。(^-^)

a-kuma3さんのコメント
jsFiddle にサンプルを作ってみました。 http://jsfiddle.net/a_kuma3/asdsqjep/embedded/result/ -パラメータのところは、固定で書いちゃってます -アニメーションの効果が分かりやすいように、時間を長めにしてます 少し、ウィンドウを小さめにして、表示してみてください。

m0r1y055tanさんのコメント
おおおっ。今度は何故かうまくいきました!(@ ∀ @ )>" 理由はわかりませんが、どうやら上記のコードのif文の前に param = "x"; を追加したのがよかったようです。サンプルを作っていただいたおかげで解決できました!ヾ(*´∀`*)ノやた〜? a-kuma3さん、いつも助かります!!ありがとうございました〜 <(^ - ^)> 後ほどポイントさしあげます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ