通过 data-* 属性启用
将 data-toggle="scroll" 添加到应该用作可滚动区域的元素(通常是<body>元素)。
然后,为数据目标属性添加ID的值或导航栏(.navbar)的类名。 这是为了确保导航栏与可滚动区域连接。
请注意,可滚动元素必须与导航栏列表项内的链接的ID匹配(<div id="section1"> 与 <a href="#section1">匹配)。
可选的 data-offset 属性指定在计算滚动位置时要从顶部偏移的像素数;当您觉得导航栏内的链接在跳转到可滚动元素时过早或过早更改活动状态时,此功能很有用;默认值为 10px。
// 可滚动区域
<body data-spy="scroll" data-target=".navbar" data-offset="50">
// 导航栏-<a>元素用于跳转到可滚动区域中的某个部分
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
// Section 1
<div id="section1">
<h1>Section 1</h1>
<p>尝试滚动此页面,并在滚动时查看导航栏!</p>
</div>
...
</body>
尝试一下