前提・実現したいこと

ドロワーの作成にjsプラグイン「hiraku.js」を使用しているのですが、スマホメニューのリンクの挙動がおかしく、困っています。
hiraku.jsを使用したことがある方、似たような事例で詰まった経験のある方いましたら、
正しくナビゲーションを設置する方法をご教授いただけましたら幸いです。
なお、ナビゲーションはページ内遷移（リンク位置にスクロール）となります。

詳しくは現在作成中のサイトをアップしましたので、スマホ画面のナビゲーションの挙動をご確認ください。
https://satori-log.com/product/30daystrial-final/

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

  1. メニューのリンクを押しても画面がその位置までスクロールしない

原因：
メニューを開いたときにhiraku.jsが画面を固定しているため

自分なりの解決策：
jQueryでbodyに対して、positionとoverflow設定を初期値に指定し直すことでスクロール固定を解除

  1. スクロール固定解除後、メニューのリンクを押し、メニューを閉じたとき、画面のスクロール位置が画面最上部に戻ってしまう

原因：不明

推測：hiraku.jsの何らかの設定によるもの

自分なりの解決策の推測：hiraku.jsの初期設定をjQuery等で上書きする

補足：

  1. 「メニューのリンクを押しても画面がその位置までスクロールしない」がそもそもの問題でして、
    それを解決後に、
  2. 「スクロール固定解除後、リンクを押し、メニューを閉じたとき、画面のスクロール位置が、画面最上部に戻ってしまう」が起きている状況です。
    1の解決方法が正しかったのか、
    また、それが正しかった場合、2はどのようにして解決すれば良いのか知っている方は教えてくださると幸いです。

エラーメッセージはありません。

該当のソースコード

該当箇所を抜粋しました。

スマホメニューに関するHTML

<body class="drawer drawer--right">
    <header role="banner">
        <!-- ハンバーガーボタン -->
        <button type="button" class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1" aria-expanded="false">
            <!-- <span class="hiraku-open-btn-line"></span> -->
            <img class="open-btn" src="img/hamburger.svg" alt="ハンバーガーボタン">
            <img class="close-btn" src="img/batsu.svg" alt="閉じるボタン">
        </button>
        <!-- モバイルメニュー -->
        <nav class="mobile-nav offcanvas-right" role="navigation">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#news" class="nav-link">News</a>
                </li>
                <li class="nav-item">
                    <a href="#service" class="nav-link">Service</a>
                </li>
                <li class="nav-item">
                    <a  href="#results" class="nav-link">Results</a>
                </li>
                <li class="nav-item">
                    <a href="#qa" class="nav-link">FAQs</a>
                </li>
                <li class="nav-item">
                    <a href="#price" class="nav-link">Price</a>
                </li>
                <li class="nav-item">
                    <a href="#comments" class="nav-link">Comments</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
</body>

スマホメニューの動作関連

$(document).ready(function () {
  // スマホメニューの開閉
  $(".offcanvas-right").hiraku({
    btn:"#offcanvas-btn-right",
    direction:"right"
  });

  // リンクを押したとき画面のロックを解除する
  $('a[href^="#"]').click(function() {
    $('body').css('position', 'static');
    $('body').css('overflow', 'scroll');
    $('body').css('overflow-y', 'scroll');
  });
});

リンク押下時のスクロール動作関連

$(document).ready(function () {
  $('a[href^="#"]').click(function() {
      var speed = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('html, body').animate({scrollTop: position}, speed, 'swing');
      return false;
  });
});

試したこと

一通り調べてみたところ、似た事例が存在しました。
ただ、解決策に「PCを再起動」とありましたが、私の場合、やってみても変わりませんでした。
一応載せておきます。
https://teratail.com/questions/200664

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

実行環境

・Mac
・Chrome

プラグイン

・jQuery.3.4.1
・hiraku.js

画面サイズ

モバイル（767px以下）