外部のページから、ハッシュタグを加えたURLを指定し
自分のページの指定した箇所を表示させたいのですが、
正しい位置に飛びません。
・自分のページの指定箇所 <div id="■■■">
・外部ページのリンク指定 a href="http://○○○○○.jp/#■■■"
ちなみに、自分のページは基本indexのみで、
ものすごく長く(height10000pxくらい)、
ハッシュタグを使ったjava scriptのページスクロールで
指定箇所を行き来できるようにしています。
<script type="text/javascript">
jQuery.fn.extend({
scrollTo : function(speed, easing) {
<!-- hashの取得が出来なければ、処理を中断 -->
if(!$(this)[0].hash || $(this)[0].hash == "#") {
return false;
}
return this.each(function() {
var targetOffset = $($(this)[0].hash).offset().top;
$('html,body').animate({scrollTop: targetOffset}, speed, easing);
});
}
});
$(document).ready(function(){
$('a[href*=#]').click(function() {
$(this).scrollTo(1200);
return false;
});
});
</script>
自分のページのソースは簡略化すると
以下のような感じになります。
<body>
<div id="□□□"></div> ←1番上です
<div id="□□□□"></div>
<div id="□□□□□"></div>
<div id="■■■"></div>
<div id="■■■■"></div>
<div id="■■■■■"></div> ←1番下です
</body>
現状、外部からリンクした場合は、
ページ上部の<div id="□□□"><div id="□□□□"><div id="□□□□□">には正しく飛びますが、
何故か、ページ下部の<div id="■■■"><div id="■■■■"><div id="■■■■■">になると
指定しても、最下部に飛ばされる状態です。
何度か検証をしてみたところ
<div id="□□□□□"></div>と<div id="■■■"></div>を入れ替えた場合、
<div id="■■■"></div>は正しくリンク位置へ
<div id="□□□□□"></div>は最下部へ
となりました。
どうも位置(高さ)による原因のようなのですが、
さっぱりわかりません。。
原因分かる方、いらっしゃいませんでしょうか。。。。。。
No.2ベストアンサー
- 回答日時:
最下部まで行ってることだし、スクロール領域を使い切ってるだけ
とも読めるけど違うのかな?
最下部まで行って表示領域の上端が目的の要素先端に届かないのは
正常な動作だけど。
お返事ありがとう、ございます。
スクロール領域のご指摘の通り
あるdivのheightを極端に長くしたところ
しっかりリンクするようになりました!
ただ倍ぐらいの長さになりましたが、、
ありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
cssでdisplay:noneを指定した時...
-
バッチファイルでカウントアッ...
-
背景色を透明化
-
HTMLとJavaScriptで作ったタイ...
-
読み込んだQRコードをフォーム...
-
変数内容をHTML内で表示する方法
-
ネストされたハッシュの値から...
-
checkboxにチェックを入れると...
-
iframe内のリンクが飛ばないの...
-
classList で、class名が付かな...
-
html内でJavaScriptで参照先を...
-
HTMLタグに複数のクラスを設定...
-
ディレクトリ内画像表示
-
CSS のみのタブ切り替えについて
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数名をどのようにつけるのが...
-
表示・非表示のスクリプトで、...
-
クリックで色変更後に既に変更...
-
jQueryでクリックされた要素のi...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
変数内容をHTML内で表示する方法
-
テキストエリア内の一部の文字...
-
classの中の<a>タグにidを追加
おすすめ情報