我希望在单击链接后平滑滚动到页面上的部分。我找到了制作方法，但它对我不起作用，我不明白为什么。
这是我的带有链接和部分的 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>
这里是我如何在 </body> 之前连接 jquery :
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
这里是我如何在 <head></head> 中连接我的脚本:
<script src="js/script.js"></script>
这里是 script.js 的代码:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
最佳答案
引用你所说的话:
- “这里是我如何在
</body>之前连接 jquery” - “这是我如何在
<head></head>中连接我的脚本”
所以这里的问题是 script.js在<head>依赖于 jQuery，但 jQuery 仅包含在 <body> 的末尾.
您应该更改您的代码，以便在 之前 包含 jQuery script.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>
关于javascript - 当我想平滑滚动到这些部分时，JQuery 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47490041/