我在我正在制作的网站上为我的导航栏提供了以下代码：
<body data-spy="scroll" data-target="#navbar" data-offset="20">
<!-- navbar -->
<div id="home">
<div id="navbar">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded hidden-sm-down fixed-top mb-0">
<div class="container">
<a class="navbar-brand" href="#">honesty</a>
<div class="navbar-collapse justify-content-end" id="navCollapse">
<ul class="navbar-nav smooth-scroll">
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
滚动间谍代码不起作用(从w3Schools页面获取(
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
我真的不确定是 Bootstrap 的导航栏导致了问题还是我的 jQuery 或两者的组合。我将不胜感激任何帮助。我还听说scrollspy可能会弄乱涉及导航栏和/或父元素的jQuery脚本。
请注意，我使用的是引导程序 4 而不是 3。
scrollspy工作，你只需要为你想要滚动到的区域分配id(每个导航栏项目对应一个id(
例如，当您单击About时，JQuery 会在页面上的某处查找id='about'。
hash设置为等于导航栏中About链接的href，即'#about'$(hash).offset().top在页面上找到一个带有id='about'的元素并返回其顶部坐标。JQuery animate 函数用于滚动到这些坐标。
问题：
-
目前，您没有任何可以定位的 ID，因此
$(hash)不会返回元素。 -
然后
offset()在未定义的$(hash)上调用，这会产生错误。 -
你不能打电话给
offset()undefined.
这是使用Bootstrap 4的scrollspy代码的工作演示：CodePen演示
我还在 animate 函数中减去了 60 像素，如下所示：
$(hash).offset().top - 60
这会使滚动目标60px更高，这在本例中很有帮助，以便导航栏不会隐藏要滚动到的元素。
jqueryslim不包含 animate 函数。