980px〜640px間のスムーズスクロールでの動作不備

スムーズスクロールの状況

jQueryでスムーズスクロールを作っています。
実装は完了したのですが、画面幅が981px以上、また639px以下で正常に動作し、980px〜640pxまでの間が正しく動作しません。
動作は　let position = target.offset().top ;で、target要素に移動する仕組みです。981px以上、639px以下では正常に移動するのですが、980px〜640pxの間が、意図したところには来ず、バナーをクリックする場所によって一番下に来たり、target要素の上の要素で止まったりとランダムに動作します。

発生しているエラーなどはなく、また処理で止まっているところはない状態です。
どなたかご教示いただければ幸いです。
よろしくお願いします。

jQuery

jQuery
1$(window).load(function () {
2  $('a[href^="#"]').click(function() {
3    const speed = 400;
4    const href= $(this).attr("href");
5    let target = $(href == "#" || href == "" ? 'html' : href);
6    let position = target.offset().top ;
7  
8    $('body,html').animate({scrollTop:position}, speed, 'swing');
9  });
10});

HTML

980px〜640px間でも、#targetリンクをクリックしたらid="taarget"にスムーズスクロールで移動させたい。

バナーリンク部分

HTML
1<aside>
2<!--このリンク（href="#target"）をクリックでスムーズスクロール動作 -->
3  <a href="#target" class="fixed-cta is-show">
4    <picture>
5      <source media="(min-width: 641px)" srcset="../../img/fixed_banner_pc.png">
6      <img src="../../img/fixed_banner_sp.png" alt="hoge" width="830" height="177">
7    </picture>
8  </a>
9</aside>

リンク先

html
1<div id="big-hoge" class="hoge">
2  <!-- 980px〜640px間でも、この部分（id="target"）にスムーズスクロールで移動させたい -->
3  <div id="target" class="hoge">
4    <div class="hoge__icon">
5       <img src="../../img/icon_hoge.png" alt="hoge">
6    </div>
7    <p class="hoge">
8      <a href="http://www.hogehoge.co.jp" class="hoge">
9        <img src="../../img/hoge_pc.png" alt="hoge">
10      </a>
11    </p>
12    <div class="hoge">
13      <img src="../../img/hoge_sp.png" alt="hoge">
14      <div class="hoge__icon">
15        <img src="../../img/icon_hoge.png" alt="hoge">
16      </div>
17      <p class="hoge">
18        <a href="http://www.hogehoge.co.jp" class="hoge">
19          <img src="../../img/hogesp.png" alt="">
20        </a>
21      </p>
22    </div>
23  </div>
24</div>

CSS

#target に関わりがありそうなCSS

css
1#big-hoge {
2    background: url(../img/big-hoge_pc.png) center 0 no-repeat;
3    padding: 530px 0 0;
4    margin-top: -12px;
5}
6
7#target {
8    background: url(../img/hoge_pc.png) 0 0/contain no-repeat;
9    width: 965px;
10    height: 1020px;
11    margin: -30px auto 0;
12    padding-top: 815px;
13    position: relative;
14    left: 3px;
15}