スムーススクロールが効かない

前提・実現したいこと

javascriptを使って、スムーススクロールをしたいのですがうまくいきません。
目的の場所まで画面を移動できるのですが、なめらかにスクロールせずただ画面が切り替わるといった現象になっています。
なにが原因なのでしょうか？

javascriptはanimation.jsファイルに保存しています。

コンソールを確認したところ、
animation.js:1 Uncaught ReferenceError: $ is not defined
at animation.js:1
と表示されました。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<link rel="preconnect" href="https://fonts.gstatic.com">
8<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
9<link rel="preconnect" href="https://fonts.gstatic.com">
10<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
11<link rel="stylesheet" href="css/resset.css">
12<link rel="stylesheet" href="css/index.css">
13<script src="animation.js"></script>
14<title>Index</title>
15</head>
16
17<!--IEでobjectfitが使えるようにする-->
18<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>
19<script>
20  objectFitImages();
21</script>
22
23<body>
24<header>
25  <nav class="nav">
26    <ul>
27      <li><a rel="home" href="#top">Home</a></li>
28      <li><a rel="work" href="#work">Work</a></li>
29      <li><a rel="profile" href="#profile">Profile</a></li>
30      <li><a rel="contact" href="#contact">Contact</a></li>
31    </ul>
32  </nav>
33</header>
34<main>
35  <div id="top" class="main-cover"></div>
36  <div class="main-title"></div>
37  <!-- top -->
38  
39  <div id="work" class="work">
40    <ul>
41      <li></li>
42      <li></li>
43      <li></li>
44      <li></li>
45    </ul>
46  </div>
47  <!-- work -->
48  
49  <div id="profile" class="section-home-about">
50    <div class="home-profile">
51      <div class="home-profile-container">
52        <div class="home-profile-img"> <img src="img/my-img.jpg" alt="#">
53          <div class="home-profile-name">
54            <p>ハヤシテツヤ</p>
55            <p>TETSUYA HAUASHI</p>
56          </div>
57        </div>
58        <!-- home-profile-name -->
59        <div class="home-profile-data">
60          <p>〒135-0016 東京都江東区東陽三丁目1-10 インペリアルビル301</p>
61          <p>Imperial building 301, 3-1-10, Toyo, Kotoku, Tokyo, 135-0016, Japan</p>
62          <p>tel:090-9989-7400</p>
63          <p>mail:tetsuya@gmail.com</p>
64          <p>[Facebook] [twitter]</p>
65        </div>
66        <div class="home-profile-p">
67          <p>ウェブ、グラフィックのデザイン作成の活動をしております。<br>
68            ご感想、お仕事のご依頼は<a href="#section-home-contact">お問い合わせフォーム</a> または<a href="mailto:tetsuya@gmail.com">メール</a>よりお気軽にお送りください。 </p>
69        </div>
70        <div class="home-profile-p">
71          <p>We have been acting with the main business lines of web designs, graphic design productions.<br>
72            If you have some opinion or work to request, please feel free to contact us by the inquiry form or email.</p>
73        </div>
74      </div>
75      <!-- home-profile-container --> 
76    </div>
77    <!-- home-profile --> 
78  </div>
79  <!-- section-home-about -->
80  
81  <div id="contact" class="section-home-contact">
82    <div class="home-contact-container">
83      <h2>Contact</h2>
84      <div role="form" class="wpcf7" id="wpcf7-f2604-o1">
85        <div class="home-contact-form">
86          <p> <span class="your-name">
87            <input type="text" name="your_name" placeholder="Your name">
88            </span> </p>
89          <p> <span class="your_email">
90            <input type="text" name="your_email" placeholder="email adress">
91            </span> </p>
92          <p> <span class="your-name">
93            <textarea type="your-body" rows="10" placeholder="Inquery Contencts"></textarea>
94            </span> </p>
95        </div>
96        <div class="home-contact-form-submit">
97          <input type="submit" value="submit" class="wpcf7-form-control wpcf7-submit">
98        </div>
99      </div>
100    </div>
101    <!-- home-contact-container --> 
102  </div>
103  <!-- section-home-contact --> 
104</main>
105<footer> <small>Copyright 2021 tetsuya design all right reserved.</small> </footer>
106</body>
107</html>
108

javascript
1$('a[href^="#"]').click(function() {
2  // スクロールの速度
3  let speed = 400; // ミリ秒で記述
4  let href = $(this).attr("href");
5  let target = $(href == "#" || href == "" ? 'html' : href);
6  let position = target.offset().top;
7  $('body,html').animate({
8    scrollTop: position
9  }, speed, 'swing');
10  return false;
11});

試したこと

javascript
1let speed = 400;

この値を変更してもスムーススクロールになりませんでした。

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

macOS
Dreamweaver

mai1210

2021/03/15 03:57

こんにちは。jQueryの読み込みはされていないでしょうか？

tetsuya7724

2021/03/15 06:36

jQueryの読み込みをしていなかったので<head>ダグに読み込みスクリプトを入れましたが、それでもうまくいきませんでした。 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  </head>

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

回答2件

ベストアンサー

そもそもjQuery本体の読み込みをされずにjQueryの機能を利用しているように見受けられます。
ブラウザのコンソールにエラー出てるのでは。
$ is not definedのようなエラー。

投稿2021/03/15 04:32

m.ts10806

総合スコア80875

tetsuya7724

2021/03/15 06:43

m.ts10806

2021/03/15 06:45

回答後半にかいた、エラーは確認されましたか？それに、どこにどのように当該記述を入れたのか、質問に追記されないとこちらの意図通りか分かりません。「うまくいかない」では情報量ゼロですよ。

tetsuya7724

2021/03/15 06:58

すみませんでした。コンソールを確認したところ、 animation.js:1 Uncaught ReferenceError: $ is not defined at animation.js:1 と表示されました。 jQueryの読み込みはしていなかったので、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> を.htmlの<head>内に記入しました。コンソールを確認するとエラーはなくなったのですが、それでもスムーズスクロールをせず、画面が切り替わるだけの現象が起こっています。

m.ts10806

2021/03/15 07:20

上から実行されるので要素がまだ読み込まれてない段階で要素を取ろうとしてnullなのでは。 Document.readyでロードを待つかbody閉じの直前にjs一式持っていってください

m.ts10806

2021/03/15 07:20

あと、質問に追記を。

tetsuya7724

2021/03/15 08:20

質問に追記をしました。 jsも下のように記入を変えるとスムーズスクロールになりました。ありがとうございます。 jQuery(document).ready(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; }); });

m.ts10806

2021/03/15 08:28 編集

調べていくとわかりますが、 jQuery(document).ready(function() { は $(function() { と（ほぼ）等価です。お好みでどうぞ。あと、デバッグ覚えましょう。指定の要素が取れてるかとか変数の値とか確認できるようになるだけで質問しなくても解決できるようになっていきますよ。

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

※head内でjQuery → animation.jsの順で読み込んでいると想定して

<head>でanimation.jsを読み込んでいるので、`a[href^="#"]').click`の時点ではまだHTMLが描画されておらず、対象がない状態です。

HTMLの読み込みを待ってから実行されるようにするか

jQuery
1$(document).ready(function(){
2    $('a[href^="#"]').click(function() {
3      // スクロールの速度
4      let speed = 400; // ミリ秒で記述
5      let href = $(this).attr("href");
6      let target = $(href == "#" || href == "" ? 'html' : href);
7      let position = target.offset().top;
8      $('body,html').animate({
9        scrollTop: position
10      }, speed, 'swing');
11      return false;
12    });
13});

animation.jsの読み込みをbody内の最後にしてみてください。

投稿2021/03/15 06:59

mai1210

総合スコア272

tetsuya7724

2021/03/15 08:19

jQueryが読み込んでいなかったので、jQueryの読み込みをjsの読み込みスクリプトの前に記入しました。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> そのあと、jsファイルを下のようなdocument.readyの形に記入を変えるとスムーズスクロールにできました。 jQuery(document).ready(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; }); });

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

あなたの回答