Javascript 当我想平滑滚动到各个部分时，JQuery不工作

我想有平滑的滚动到页面上的部分后，点击链接。我找到了制造它的方法，但它对我不起作用，我不明白为什么

下面是我的html代码及其链接和部分：

    <header class="d-flex main-header">
        <div class="container-fluid header-container">
                <nav class="navbar navbar-toggleable-sm navbar-inverse main-navigation">
                    <h1 class="mr-auto"><a href="index.html"><img src="images/site_logo.png" alt="logo"></a></h1>
                        <button class="navbar-toggler navbar-toggler-right menu-button" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <ul class="navbar-nav ml-md-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#about">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#portfolio">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#team">Team</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
    </header>

<!--Sections-->

<section class="d-flex about" id="about">
  <!--Content-->
</section>


<section class="d-flex portfolio" id="portfolio">
  <!--Content-->
</section>

<section class="d-flex team" id="team">
  <!--Content-->
</section>

<section class="d-flex contact" id="contact">
  <!--Content-->
</section>

---

引用你的话：

“这里是如何在

之前连接jquery”

“以下是我如何在

中连接脚本的方法”

所以这里的问题是

中的

script.js

依赖于jQuery，而jQuery只包含在

的末尾

您应该更改代码，以便jQuery包含在脚本.js之前：

    ...
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
</body>

。。。

您在当地工作吗<代码>交叉原点在这种情况下检查可能失败。。。如果是这样，请在本地设备期间删除

完整性

和

交叉源

，我知道您也会为我这样做；）

<script src="js/script.js"></script>

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

    ...
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
</body>