0

ホームページにスムーススクロールを入れたくてindex.htmlのhead内に以下のコードを書きました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- #リンクのスムーススクロール -->
    <script>
      $(function(){
        // #で始まるリンクをクリックしたら実行されます
        $('a[href^="#"]').click(function() {
          // スクロールの速度
          let speed = 400; // ミリ秒で記述
          let href= $(this).attr("href");
          let target = $(href == "#" || href == "" ? 'html' : href);
          let position = target.offset().top;
          $('body,html').animate({scrollTop:position}, speed, 'swing');
          return false;
        });
      });
    </script>

ローカルで見たところ反映されましたので本番環境にアップしたところ適応されず、

index.html:25 Uncaught ReferenceError: $ is not defined

というエラーがでていました。(該当箇所はスムーススクロールのスクリプトタグの一番初めの$です。)
jqueryのバージョンを変えてみたりして試しましたが改善は見られませんでした。
理由がわかる方いましたら教えてください。

7
  • ブラウザのF12のデバッグツールでみたときに、jQueryのファイルを読み込めているか?もしくはエラーが出ていないか確認できますか?
    – keitaro_so
    Commented 2021年5月18日 6:16
  • デバッグツールでのエラーがindex.html:25 Uncaught ReferenceError: $ is not definedです。 Commented 2021年5月18日 6:49
  • すいません。わかりずらくて、正確に言うとリソースが読み込めているかエラーが出ていないか確認するのはChromeであればnetworkタブで該当のリソースが読み込めているか確認できます。
    – keitaro_so
    Commented 2021年5月18日 6:58
  • 見方がよくわからないのですがjquery.min.jsの文字が赤くなっておりfailed to load response date とあります。 Commented 2021年5月18日 8:38
  • ちなみのそのブラウザで、該当のjQueryのURLを直アドレスバーに入れると表示することはできますか?
    – keitaro_so
    Commented 2021年5月19日 1:02

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。