リンクボタンをクリックすると、別ページへ飛んだ後、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>

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/12/10 01:57:54
  • 終了:2014/12/10 23:17:03

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4524ベストアンサー獲得回数18802014/12/10 12:22:31

ポイント100pt

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

$(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);
    }
});
他1件のコメントを見る
id:a-kuma3

jsFiddle にサンプルを作ってみました。
http://jsfiddle.net/a_kuma3/asdsqjep/embedded/result/

  • パラメータのところは、固定で書いちゃってます
  • アニメーションの効果が分かりやすいように、時間を長めにしてます

少し、ウィンドウを小さめにして、表示してみてください。

2014/12/10 22:11:50
id:m0r1y055tan

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

2014/12/10 22:41:10

その他の回答(1件)

id:kurowizumatome No.1

kurowizumatome回答回数10ベストアンサー獲得回数12014/12/10 07:18:15

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>
を書くだけ。

id:m0r1y055tan

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

2014/12/10 22:04:56
id:a-kuma3 No.2

a-kuma3回答回数4524ベストアンサー獲得回数18802014/12/10 12:22:31ここでベストアンサー

ポイント100pt

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

$(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);
    }
});
他1件のコメントを見る
id:a-kuma3

jsFiddle にサンプルを作ってみました。
http://jsfiddle.net/a_kuma3/asdsqjep/embedded/result/

  • パラメータのところは、固定で書いちゃってます
  • アニメーションの効果が分かりやすいように、時間を長めにしてます

少し、ウィンドウを小さめにして、表示してみてください。

2014/12/10 22:11:50
id:m0r1y055tan

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

2014/12/10 22:41:10

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません