アンカーリンクの位置と、スクロール挙動がおかしい問題をどうにか解決したい

お忙しいところすみません！！

前提・実現したいこと

文中にcodepenのcodeがあります。

モーダルで画面を切り替えたときに、
☆切り替える前の画面がうごかないようにしたい。
☆正しいところにアンカーリンクがうごいてほしい
☆スクロールしたときにちゃんと上までスクロールされてほしい。
です。

現在、
・animatedModal.js
をつかって、任意の画面に切り替え
・スクロール時のアニメ(imagesLoaded)
をつかって、背景画像のスクロールにパララックスのような効果
・スムーススクロール
をつかって、アンカーリンクでの移動をなめらかに
しています。

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

animatedModal.jsで、画面を切り替えると、
モーダルにきりかわるときにもといたところにいてくれず、スクロールが勝手に下に動いてしまうのと、
TOPの上まで、スクロールが出来ず途中で止まってしまう現象がおきております。

animatedModal.jsは、何もつけない状態なら、スクロールが勝手に下に動くなんていう挙動は起こさなかったので、
あとからつけたしたなにかの影響でそうなっているのですが、三日くらいかけても解消されず困り果ててしまいました。

いろいろ、実験してみたところ、現状は、内容物と、内容物のマージンが現在の長さになると、
この現象が起こり、
内容物を極端に少なくすると、この現象は発生しないということは分かりました。
しかしコンテンツを減らすこともできませんし、Magineやパディングもつけたいです。

該当のソースコード

コードペン

今完成に近い状態でここに載せるにはcodeがめちゃくちゃ長く、
しかし載せる用に削ると、問題が解消されてしまうので、
試験的にこんな感じになってるというのを作ってみました↑
実際は、ここまでにひどくないのですが、伝えたいことは、

codepenにある「ここを押して見てください」ボタンを押すと、animatedModal.jsがうごいてくれて、

内容物がモーダルとして、表示されます。しかし、うしろで、勝手にモーダルじゃないメインのほうが、動き始めて、戻る頃には、もといたところではない場所に、勝手に動いてしまっています。

さらに、画面がoverflow:hiddenのような状態で、

スクロールをしてメインビジュアルに戻ろうとすると、うごきません。
実際のコードでは、ここまでガチガチに動かないわけではないのですが、いずれにせよ、
スクロールをしてメインビジュアルに戻ろうとすると、500pxくらい、上にスクロールが出来ず、全画面でメインビジュアルにもどるには、
右横にある↓これが、一応作ったpagenationなのですが、これを押すほかありません。
これじゃめちゃめちゃ使いにくい！！！

とにかくanimatedModal.jsで戻ってきたあとの挙動がおかしいのです。

試したこと

多分、overfllow関係と、アンカーリンクの先のMagineとかパディングのせいでは？と思い、
いろいろやってみました。
いろいろやってみて、
☆切り替える前の画面がうごかないようにしたい。⇒原因分からず
☆正しいところにアンカーリンクがうごいてほしい⇒遅延読み込みを画像に設定しているため高さががたがたするのが原因だと思われます
☆スクロールしたときにちゃんと上までスクロールされてほしい。⇒原因わからず
です。

挙動だけはうまくいく↑上記が全部解消されるとき⇒各sectionにパディングやmarginをつけないとき。コンテンツの内容が少ない時。でもこれだとみちみちで醜くて困る
JSファイルに記載しているoverfllow系でhiddenになってるものなどを消してみる⇒解消されず
画像を遅延読み込みしているので、それを無視するcodeをJSに書く⇒アンカーリンクがずれる問題もあったのですがこれはこのcode↓でアンカーリンクずれる問題は解消されましたが、スクロールができない問題は解消されませんでした。

JS
1$('a[href^="#"]').click(function(e) {
2  var href = $(this).attr("href");
3  var target = $(href == "#" || href == "" ? 'html' : href);
4  var position = target.offset().top;
5
6  $.when(
7    $("html, body").animate({
8      scrollTop: position
9    }, 1600, "swing"),
10    e.preventDefault(),
11  ).done(function() {
12    var diff = target.offset().top;
13    if (diff === position) {
14    } else {
15      $("html, body").animate({
16        scrollTop: diff
17      }, 10, "swing");
18    }
19  });
20});

固定ヘッダー分のずれをヘッダーの高さ分解消するテクニック

⇒ロゴとpagenationを固定してますが、帯状で固定していないのと、ヘッダー分どころではない部分が見えなくなっており、腑に落ちず…変化なく…

padding-topで固定ヘッダーの分だけ上に上げつつ、margin-topのマイナス指定で相殺するテクニック

⇒変化なく。。。

・モーダルを閉じ戻ってきた時に、スクロール出来ない部分が発生してしまいpagenationのアンカーリンクでしか上にいけないのは何故なのか。
・モーダルを閉じ戻ってきた時に、
・余白をつけたりコンテンツを増やすととそのぶんなのかはっきりとは不明ですがアンカーリンクがずれたり、勝手にスクロールされたりスクロール出来なかったりという致命的な諸問題をなんとかしたいです。