※ ChatGPTを利用し、要約された質問です(原文:外部ページからハッシュタグ(#)のリンクへ正しく飛ばない)
外部ページからハッシュタグへの正しいリンクができない
このQ&Aのポイント
外部のページから、ハッシュタグを加えたURLを指定し、自分のページの指定箇所を表示させたいが、正しい位置に飛ばない。
自分のページは基本的にindexで、ハッシュタグを使ったJavaScriptのページスクロールで指定箇所を行き来できるようにしているが、ページ下部になると指定しても最下部に飛ばされてしまう。
何度か検証をした結果、指定箇所の位置(高さ)による原因のようだが、具体的な解決策がわからない。
外部ページからハッシュタグ(#)のリンクへ正しく飛ばない
外部のページから、ハッシュタグを加えた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>は最下部へ
となりました。
どうも位置(高さ)による原因のようなのですが、
さっぱりわかりません。。
原因分かる方、いらっしゃいませんでしょうか。。。。。。
お礼
お返事ありがとう、ございます。 スクロール領域のご指摘の通り あるdivのheightを極端に長くしたところ しっかりリンクするようになりました! ただ倍ぐらいの長さになりましたが、、 ありがとうございました!!