他ページに遷移してさらに遷移先のページの特定の場所に飛ばしたい時アンカータグは以下のように書くと思います。
<!--hoge.htmlのid=hogeに飛ばす場合-->
<a href="./hoge.html#hoge">ほげ</a>
この遷移方法でなぜか飛び先がめっちゃずれるという現象が起きていました。
フッター近くまで飛んでしまうのです。
何度も遷移してる内に気づいたのですが、遷移先のページがGoogle Mapやスライダーなど動的に要素を読み込む部分が多かったため、読み込み前ページ内の要素がほとんどない状態、つまり高さがほぼ0の状態でページ内リンクが動いて、一番下まで飛んでしまっていたようです。（たぶん）
jQueryでページ遷移の記述を書いて、それを読み込み後に実行することで解決しました。
①ページ遷移のアンカータグを以下のように書きます。
<a href="./hoge.html?id=hoge">ほげ</a>②ページ遷移先の一番下に以下のように書きます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on('load',function(){
$(function() {
let url = location.href;
if(url.indexOf("?id=") != -1){
let id = url.split("?id=");
let $target = $('#' + id[id.length - 1]);
if($target.length){
let position = $target.offset().top;
$("html, body").animate({scrollTop:position}, 1);
}
}
});
})
</script>③以下解説です。
5行目 let url = location.hrefでURLを取得します。
6行目 URLに?id=が含まれていたら
7行目 ?id=で前後に分割してリストに入れて
8行目 先のリストの一番最後（?id=の後が入っている）と同じid名の要素を取得
10行目 先の要素の位置を取得
11行目 先の要素の位置までスクロール
以上を$(window).on(‘load’,function(){ でページ読み込み後に実行することで位置がずれることを防止しています。
上のコードは参考サイトからほとんどそのまま使っているものなのですが、解決したのがだいぶ前になりまして、再度見つけることができませんでした。（参考サイト様すみません( ;∀;)）
以上になります。
コメント