JQueryでの画面スクロールが出来ない

###実現したいこと
JQureyを使用し、html画面での画面をスクロールさせたいです。
aタグをクリックすると、紐づいたidへの箇所に自動スクロールするスクリプトを書いたのですが上手く動作してくれません。

aタグのリンクをクリック後、画面がスクロールではなく一瞬で遷移します。
要はJQueryを適用していない状態と同じ動きをします。

原因・解決策を知りたいです。

###環境
OS:Windows10
ブラウザ：Fierfox,IE,MicroEdge

###コード

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Title -->
    <title>test</title>
  </head>

<body>
<a href="#nav1">ナビ1へジャンプ</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!-- ページ内ジャンプ先 -->
<div id="nav1">ここにナビ1の内容を記述</div>

<script>
  $(function(){
    $('a[href^="#"]').click(function() {
      var speed = 100; // スクロールスピード(ミリ秒)
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
</script>

</body>
</html>