ハッシュを持ったURLにアクセスした際、id="hogehoge"までスクロールする機能を実装したい

Question

前提・実現したいこと

jQuery、JSの初学者です。

URL例：https://hogehoge.com/index.html#hogehoge

• 上記のようなハッシュを持ったURLにアクセスした際、id="hogehoge"までスクロールする機能を実装したいです。
• ヘッダーをfixedで固定さているため、#hogehogeにヘッダーが被らないようにしたい。

いろいろ試した結果、以下のソースコードになりました。

発生している問題・エラーメッセージ

Win10 Firefoxでは動きますが、Android Google Pixel 3aのFirefoxで検証した結果、PCとは違う挙動になってしまいました。

Win10 Firefoxの検証にてコンソールを見たところ（iPhone 6/7/8サイズ）、変数targetの値が上手く取得できていないようでした。

該当のソースコード

$(window).on('load',function(){
    let id = $( location ).attr('hash');
    let height = $(".date-list").height();
    if(id){
      let target = $(id).offset().top - height - 120;
      $('html,body').animate({scrollTop: target}, 'swing');
      console.log(target);
    }
});

参考にしたサイト

【jQuery】ページ遷移後に特定の要素の位置までスクロールする
https://into-the-program.com/scroll-after-loading/

補足情報（FW/ツールのバージョンなど）

OS

• Win10
• Android Google pixel 3a

ブラウザ

• Firefox

エディタ

• Visual Studio Code

Comments

[runnynose]

> console.log(target);
ちゃんとデバッグ入れてますね☺️
targetで取れてなければさらに細かく見てみてどこでうまくいっていないかを見れば良いと思いますけど！

例：
console.log($(id));
console.log($(id).offset());
console.log($(id).offset().top);
console.log(height);

[KoutaWatanabe]

ありがとうございます。あらためて検証してみたところ以下のような結果になりました。
（ページ最上部でリロード、Win10 Firefox　iPhone 6/7/8サイズで検証）
結果、offsetが取得できてないようです…

＞ console.log($(id));
Object { 0: div#hogehoge.speaker, length: 1, context: HTMLDocument ｈttp://127.0.0.1:5500/index.html#hogehoge, selector: "#hogehoge" }

＞ console.log($(id).offset());
Object { top: 0, left: 0 }

＞ console.log($(id).offset().top);
0

＞ console.log(height);
63（高さは取得できております。）

[KoutaWatanabe]

ページの途中までスクロールしてリロードするとその位置のoffsetの数値は取得しているのですが、
#hogehogeには移動せず、その場でリロードを繰り返すと上に徐々に（- height - 120の分だけ？）ずれていってしまいます…

Answer 1

自己解決しました。
レスポンシブのためHTML内にidを重複して書いていたため、スマホにした際もPCのidを取得しに行くが、display:none;で高さが取得できない状態でした。

<div id="hogehoge" class="sp-none">
  <p>PCテスト</p>
</div>
<div id="hogehoge" class="pc-none">
  <p>SPテスト</p>
</div>

単純に以下にしました。

<div id="hogehoge">
  <div class="sp-none">
    <p>PCテスト</p>
  </div>
  <div class="pc-none">
    <p>SPテスト</p>
  </div>
</div>