スクロールスパイをコーディングしたがスクロールされない

###前提・実現したいこと
Bootstrap ScrollSpy.js とsmooth-scroll.jsの組み合わせでナビバーのメニューをクリックすると目的の場所までスクロールさせたいです。

###発生している問題
ナビバーのメニューをクリックすると目的の場所へは移動するものの、ページがスクロールされない状況です。

###ソースコード
HTMLのコードはナビバーの箇所だけを提示します。
目的の各セクションにidの記述はしてあります。

index.html

<body role="document" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="72" id="top">
          <div id="sampleScrollSpy">
              <nav class="navbar navbar-inverse navbar-fixed-top" data-scroll-header>
                <div class="container-fluid">
                  <div class="navbar-header">
                    <!-- 横幅が狭い時に出るハンバーガーボタン -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>

                    <!-- ホームへ戻るリンク。ブランドロゴなどを置く。 -->
                    <a class="navbar-brand" href="#"><img src="images/logo.png" width="112"></a>
                  </div>

                  <!-- メニュー項目 -->
                  <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav navbar-right pull-right">
                      <li><a href="#about">茶蔵について</a></li>
                      <li><a href="#seisaku">制作一覧</a></li>
                      <li><a href="#info">用途・道具・店舗・Q&amp;A</a></li>
                    </ul>
                  </div>
                </div>
              </nav>
          </div>

main.js

    //scrollspyのnavbarを指定する
  $('body').scrollspy({ target: '#navbar' })
  //スムーススクロールを起動する
  smoothScroll.init({
      selector: '[data-scroll]',
      selectorHeader: '[data-scroll-header]',
      speed: 500,
      easing: 'easeOutQuad',
      offset: 0,
      updateURL: true,
      callback: function () {}
  }) ;
  //スマホ表示の際、開閉メニューの項目を押したときにメニューを閉じる
  $(document).ready(function () {
          $(".navbar-nav li a").click(function(event) {
          $(".navbar-collapse").collapse('hide');
      });
  });

###ファイル管理について
指定のjsフォルダに以下４点格納してあります。
・smooth-scroll.js
・smooth-scroll.min.js
・smooth-scroll.polyfills.js
・smooth-scroll.polyfills.min.js

原因がわからないため、アドバイスいただけますでしょうか。
以上、よろしくお願いいたします。

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

回答1件

ベストアンサー

質問者さんが想像するような動作は以下のようにすることで実現できると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        #about, #seisaku, #info {
9            width: 100%;
10            height: 750px;
11        }
12
13        #about {
14            background-color: #d43f3a;
15        }
16
17        #info {
18            background-color: #333333;
19        }
20
21        #seisaku {
22            background-color: #006dbf;
23        }
24    </style>
25</head>
26<body role="document" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="72" class="top">
27<div id="sampleScrollSpy">
28    <nav class="navbar navbar-inverse navbar-fixed-top" data-scroll-header>
29        <div class="container-fluid">
30            <div class="navbar-header">
31                <!-- 横幅が狭い時に出るハンバーガーボタン -->
32                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
33                    <span class="icon-bar"></span>
34                    <span class="icon-bar"></span>
35                    <span class="icon-bar"></span>
36                </button>
37
38                <!-- ホームへ戻るリンク。ブランドロゴなどを置く。 -->
39                <a class="navbar-brand" href="#" data-scroll>
40                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/logo.png" width="112">
41                </a>
42            </div>
43
44            <!-- メニュー項目 -->
45            <div class="collapse navbar-collapse" id="navbar">
46                <ul class="nav navbar-nav navbar-right pull-right">
47                    <li><a data-scroll href="#about">茶蔵について</a></li>
48                    <li><a data-scroll href="#seisaku">制作一覧</a></li>
49                    <li><a data-scroll href="#info">用途・道具・店舗・Q&amp;A</a></li>
50                </ul>
51            </div>
52        </div>
53    </nav>
54</div>
55<div id="about"></div>
56<div id="seisaku"></div>
57<div id="info"></div>
58<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
59<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
60<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.polyfills.min.js"></script>
61<script>
62    $(document).ready(function () {
63        $(".navbar-nav li a").click(function (event) {
64            $(".navbar-collapse").collapse('hide');
65        });
66
67        var scroll = new SmoothScroll('[data-scroll]', {
68            header: '[data-scroll-header]',
69            speed: 500,
70            easing: 'easeOutQuad',
71            offset: 0,
72        });
73    });
74</script>
75</body>
76</html>