djangoでjqueryを使いたい

前提・実現したいこと

ブログの記事で、目次を押すと、そのまで0.5秒でスクロールする機能を作りたいと思っています。

</body>の前で、 <script type="text/javascript" src="{% static 'bootstrap.js' %}"></script> を読み込んで、タイトルの下に、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> これを貼り付ければjqueryを使えると思ったんですけど、同じstaticディレクトリのcssは使えているのにjqueryはなぜか使えません。 jqueryを使うのに足らない点がありましたら、教えて欲しいです。

回答お願いします。

ファイル構成はだいたい以下のような感じです。

scrollapp
scrollproject
templates
----bootstrap.html
static
----bootstrap.css
----bootstrap.js

試したこと

html
1{% load static %}
2<!doctype html>
3<html lang="en">
4  <head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11    <link rel="stylesheet" href="{% static 'bootstrap.css' %}" type="text/css">
12    <title>Hello, world!</title>
13
14    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
15  </head>
16  <body>
17    <h1>Hello, world!</h1>
18    <div class="container">
19        <div class="tableOfContents">
20            <ul>
21                <li><a href="#food">好きな食べ物</a></li>
22                <li><a href="#sport">好きなスポーツ</a></li>
23                <li><a href="#tv">好きなテレビ</a></li>
24            </ul>
25        </div>
26        <div class="main-wrapper">
27            <div id="food" class="bg-success">
28                <h2>ラーメンが好きです</h2>
29            </div>
30            <div id="sport" class="bg-success">
31                <h2>サッカーが好きです</h2>
32            </div>
33            <div id="tv" class="bg-success">
34                <h2>しゃべが好きです。</h2>
35            </div>
36        </div>
37    </div>
38
39    <!-- Optional JavaScript -->
40    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
41    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
42    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
43    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
44    <script type="text/javascript" src="{% static 'bootstrap.js' %}"></script>
45
46  </body>
47</html>
48

css
1#food {
2    padding-bottom: 200px;
3    margin-bottom: 400px;
4}
5#sport{
6    padding-bottom: 200px;
7    margin-bottom: 400px;
8}
9#tv {
10    padding-bottom: 400px;
11}

js
1$(function(){
2    $('.tableOfContents a').click(function(){
3        var id = $(this).attr('href');
4        var position = $(id).offset().top;
5        $('body, html').animate({
6            'scrollTop': position
7        }, 500)
8    })
9});

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

回答1件

ベストアンサー

異なるバージョンのjqueryを読み込もうとしてますね。
bootstrapを使うためにjqueryは読み込んでいるのでtitleタグの下のものは必要ありません。

その上で以下の変更を行ってください。
bootstrapを使うために読み込まれたjqueryはスリム版と言って一部機能が実装されていません。

js
1//この部分を
2<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
3
4//これに変更
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

これで動くんじゃないでしょうか。

追記
今のままだとリンクをクリックしたときにリンク先に移動してしまうのでアニメーションが起こりませんね。
移動するのを防ぐために event.preventDefault(); が必要です。

js
1$(function(){
2    $('.tableOfContents a').click(function(){
3        event.preventDefault(); //追加する
4        var id = $(this).attr('href');
5        var position = $(id).offset().top;
6        $('body, html').animate({
7            'scrollTop': position
8        }, 500)
9    })
10});