jQueryのスクロールが外部ファイルに記述すると機能しない。htmlベタガキだと機能します。

前提・実現したいこと

javascriptを外部ファイルから読み込ませたい。

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

htmlにベタがきするとスクロールが機能するが、外部シートに記入するとエラーで機能しない。
外部シートに文字色を変えてみたり、簡単な記述は機能します。）

該当のソースコード

下記のようにhtmlにベタがきの場合はうまく機能しております。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">   
    <link rel="stylesheet" href="style.css">
    <title>Justmeet</title>
  </head>

  <body>
  	<div class="header">
	　　<ul><!-- 
	   --><a href="#1" class="link-about"><li>About</li></a><!-- 
	　　--><a href="#2" class="link-works"><li>Works</li></a><!-- 
　　　   --><a href="#3" class="link-contact"><li>Contact</li></a>
		   </ul>
  	</div><!-- /header -->
  	<div id="1" class="about">
  	   <h1>About</h1>   
	</div>
	<div id="2" class="works">		
	　　<h1>Works</h1>
	</div>
	<div id="3" class="contact">
	　　<h1>Contact</h1>
	</div> 
    <!-- jQueryの読み込み -->   
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
    <!-- ＃リンクのスムーズスクロール -->
    <script>
      $(function(){
        // #で始まるリンクをクリックしたら実行されます
        $('a[href^="#"]').click(function() {
          // スクロールの速度
          var speed = 400; // ミリ秒で記述
          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>

エラーのソースコード

こちらのように外部ファイルに書くとスクロールが機能しません。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">   
    <link rel="stylesheet" href="style.css">
    <title>Justmeet</title>
  </head>

  <body>
  	<div class="header">
	　　<ul><!-- 
	   --><a href="#1" class="link-about"><li>About</li></a><!-- 
	　　--><a href="#2" class="link-works"><li>Works</li></a><!-- 
　　　   --><a href="#3" class="link-contact"><li>Contact</li></a>
		   </ul>
  	</div><!-- /header -->
  	<div id="1" class="about">
  	   <h1>About</h1>   
	</div>
	<div id="2" class="works">		
	　　<h1>Works</h1>
	</div>
	<div id="3" class="contact">
	　　<h1>Contact</h1>
	</div>
　　　　　<p id="target">ここの色が変わります</p>
	<input type="button" value=" ボタン " onclick="changeColor('target');" />
    <!-- jQueryの読み込み -->
    <script src="script.js"></script>
  </body>
</html>

script.js の記述
スクロール こちらが機能しません。
      $(function(){
        // #で始まるリンクをクリックしたら実行されます
        $('a[href^="#"]').click(function() {
          // スクロールの速度
          var speed = 400; // ミリ秒で記述
          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;
        });
      });

文字色を変える　こちらは機能します
      function changeColor(idname){
        var obj = document.getElementById(idname);
        obj.style.color = '#ffffff';            //文字色を白にする
        obj.style.backgroundColor = '#ff0000';  //背景色を赤にする
      }

試したこと

色を変えたり簡単な指示は機能するのに、何が原因なのでしょうか。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

どんなエラーか提示されてないので提示されたコードから推測になりますが、外部ファイルにしたというhtmlにはjQuery本体の読み込み記述がありません。

投稿2019/07/21 12:08

m.ts10806

総合スコア80852

sakana

2019/07/21 12:17

mts10806さんいつもありがとうございます！ Uncaught ReferenceError: $ is not defined と出ておりました。ファイルの読み込みだけでなく、jQueryの読み込みも必要なんですね???? ありがとうございました！！ p.s先日のワードプレスの件、解決できました。ありがとうございました！