jqueryにてスクロール位置がずれる

Question

質問

下記サイトにてスクロールをしたいのですが、
目的の位置より度々ずれてしまいます。(うまくいく時もあります)

おそらく、サイト内のチャート描画でoffset()がずれることが原因だと思っておりますが、
解決方法が分からず、困っております。
誠にお手数をお掛けしますが、アドバイスを頂けないでしょうか。

・HPリンク

 $(function(){
  $(window).scrollTop($('.company__overview-results h3').offset().top);
});

試したこと

下記コードを試しましたが、解決しませんでした。

$(window).on('load', function() {
   $(window).scrollTop($('.company__overview-results h3').offset().top);
});

Answer 1

バフェット・コードにどうやってjQueryを組み込んでいるかは謎ですが

$('.company__overview-results h3')

この条件では複数存在します。
その為目的の<h3>タグではないタグが選択され位置が違うと感じているのではないのでしょうか？

$('.company__overview-results h3:contains("事業の内容")').offset().top;

<h3>タグの内容の一部で構いませんので指定されてみては？

Comments

[stsyco]

回答頂き誠に有り難う御座います。
教えて頂いたやり方でも挙動は変わらず、うまくいきませんでした。
jqueryはchrome拡張を用いて読み込んでおります。

[kuma_kuma_]

> chrome拡張を用いて読み込んでおります。
そんな強引な方法を...jquery自体はすでにバフェット・コードで使用されている事は確認しています。
新たに呼び込む必要はありません。
開発コンソール上で実行した際は特に問題ないように思われましたが...
ただバフェット・コード上で正規ルート以外で別コードを実行するのは規約上大丈夫ですか？

[stsyco]

ご返信有り難う御座います。

>開発コンソール上で実行した際は特に問題ないように思われましたが...
→チャート描画が終了後に開発コンソールでjqueryを実行された場合は確かに動作しますが、
ページを開いた時にスクロールが動作して欲しく、その際にチャートの読み込みのためかやはりスクロールがずれます。

>そんな強引な方法を...jquery自体はすでにバフェット・コードで使用されている事は確認しています。
新たに呼び込む必要はありません。
→chrome拡張を使う事が強引な方法という意味合いでしょうか。
もしくはjqueryの読み込み方法についてでしょうか。自作のchrome拡張機能manifest.json内で下記の様に読み込んでおりますが、これが不要という事なのでしょうか。
-manifest.json-
"content_scripts": [
{
"matches": ["https://www.buffett-code.com/*"],
"js": ["jquery-3.5.1.min.js", "myscript.js"],
"css" : ["style.css"]
}

>ただバフェット・コード上で正規ルート以外で別コードを実行するのは規約上大丈夫ですか？
→こちらは運営者に確認をとっております。問題がある場合は直ちに使用をやめます。

[kuma_kuma_]

> chrome拡張を使う事が強引な方法という意味合いでしょうか。
方法論としてバフェット・コードにある機能以外で外部から操作(chrome拡張)なこと
chrome拡張自体ハードルが高いのにバフェット・コード用だけに準備されていことから
「強引な」という表現を使わさせていただきました。

> "js": ["jquery-3.5.1.min.js", "myscript.js"],
バフェット・コードなら"jquery-3.5.1.min.js"が必要ありません。
2重読み込みはエラーの元です。

[stsyco]

content_scriptsから"jquery-3.5.1.min.js"の記述を削除するとchrome拡張機能が動作しないのですが、
jqueryが既に使用されているwebサイトでは本当にcontent_scriptsでjqueryを読み込む必要はないのでしょうか。私の理解不足があるかもしれませんが、何卒ご教示頂ければと思います。

[kuma_kuma_]

元々chrome拡張機能から表示している画面に対して直接関数を指定する事自体できなかったと
記憶しています。（動作空間自体分けられているから）
実行できているとお話されていたので自分の勘違いかと思っていました。
(それも含めて強引なという表現)
強引な手法ならありますがその際の”jQuery”のお話です。

chrome拡張機能の画面表示でjQueryを使用する最は構わないのですが...
「バフェット・コードなら"jquery-3.5.1.min.js"が必要ありません。」
→関数を流し込む場合”jQuery”は要りませんよという事です。

説明は下手で申し訳ない。

[stsyco]

コメント有難うございます。
色々教えて頂き、勉強になります。