モーダルを開くのと閉じるのを同じ場所で動作するようにしたい。

ポートフォリオ製作中でモーダルを開くのと閉じるのを同じ場所で動作するようにしたいです。現在、Google mapのリンクをクリックするとモーダル開く動きにしています。ただ実装したい動きと違う動きになってしまいます。見てもらうと分かるようにモーダルが開いて、閉じるボタンをクリックすると、モーダルが開いた同じ場所で閉じてほしいんですが、ヘッダーからGoogle mapのリンクまでスクロールしてしまいます。

実現したいこと
モーダルを開くのと閉じるのを同じ場所で動作するようにしたい

該当のソースコード

ja

1//モーダル 2var modalTop; //スクロール量を保存 3const open = $(".js-modal-open"), 4 close = $(".js-modal__close"), 5 modal = $(".js-modal"), 6 $body = $("body"); 7 8//開くボタンをクリックしたらモーダルを表示する 9open.on("click", function () { 10 modalTop = $(window).scrollTop(); 11 $body.css({ position: "fixed", top: -modalTop }); //スクロールを固定 12 modal.addClass("is-open"); 13 $('.header').hide(); 14}); 15 16//閉じるボタンをクリックしたらモーダルを閉じる 17close.add(modal).on("click", function () { 18 $body.css({ position: "", top: "" }); 19 $(window).scrollTop(modalTop); //スクロールの固定を解除 20 modal.removeClass("is-open"); 21 $('.header').show(); 22});

試したこと

記述を以下のものに変更したりしたのですが、どうしてもヘッダーからのスクロールが止まらず、止めることができても2回目開け閉めすると固まってしまったりします。JSだけが原因ではなくHTMLやCSSなどにも理由があるんでしょうか？宜しくお願いします。

ja

1$(function () { 2 const open = $(".js-modal-open"), 3 close = $(".js-modal__close"), 4 modal = $(".js-modal"); 5 6 //開くボタンをクリックしたらモーダルを表示する 7 open.on("click", function () { 8 modal.addClass("is-open"); 9 }); 10 11 //閉じるボタンをクリックしたらモーダルを閉じる 12 close.add(modal).on("click", function () { 13 modal.removeClass("is-open"); 14 }); 15});