Bootstrap JS 滚动监听参考

JS 滚动监听 (scrollspy.js)

Scrollspy 滚动监听插件用于根据滚动位置自动更新导航列表中的链接。

有关滚动监听的教程，请阅读我们的 Bootstrap 滚动监听教程。

提示: Scrollspy 插件经常与 Affix 插件一起使用。

通过 data-* 属性

将 data-spy="scroll" 添加到应该用作可滚动区域的元素（通常是 <body> 元素）。

然后使用导航栏的 id 或类名(.navbar) 的值添加 data-target 属性。这是为了确保导航栏与可滚动区域相连。

请注意，可滚动元素必须与导航栏列表项内的链接 ID 匹配(<div id="section1"> 匹配 <a href="#section1">)。

可选 data-offset 属性指定在计算滚动位置时从顶部偏移的像素数。当您觉得导航栏中的链接在跳转到可滚动元素时过早或过早更改活动状态时，这很有用。默认值为 10 像素。

需要相对定位: 带有 data-spy="scroll" 的元素需要 CSS 的 position 位置属性，值为 "relative" 才能正常工作。

实例

<body data-spy="scroll" data-target=".navbar" data-offset="50">


<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>


<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

亲自试一试 »

通过 JavaScript

手动启用:

实例

$('body').scrollspy({target: ".navbar"})

亲自试一试 »

Scrollspy 滚动监听选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-offset="".

名称	类型	默认值	描述	试一试
offset	number	10	指定计算滚动位置时从顶部偏移的像素数	测试一下

Scrollspy 滚动监听方法

下表列出了所有可用的滚动监听方法。

方法	描述	试一试
.scrollspy("refresh")	在滚动监听中添加和删除元素时，可以使用此方法刷新文档	测试一下

滚动监听事件

下表列出了所有可用的滚动监听事件。

事件	描述	试一试
activate.bs.scrollspy	当滚动监听激活新项目时发生	测试一下

更多实例

带有动画的滚动监听

如何将平滑的页面滚动添加到同一页面上的锚点:

Smooth scrolling

// 将 scrollspy 添加到 <body>
$('body').scrollspy({target: ".navbar", offset: 50});

// 在导航栏中的所有链接上添加平滑滚动
$("#myNavbar a").on('click', function(event) {

// 在覆盖默认行为之前确保 this.hash 有一个值
if (this.hash !== "") {

    // 防止默认的锚点点击行为
    event.preventDefault();

    // 存储哈希
    var hash = this.hash;

    // 使用 jQuery 的 animate() 方法添加平滑的页面滚动
    // 可选数字（800）指定滚动到指定区域所需的毫秒数
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){

    // 完成滚动时向 URL 添加哈希 (#)（默认单击行为）
      window.location.hash = hash;
    });

} // End if

});

亲自试一试 »