Bootstrap JS 滚动

JS Scrollspy (scrollspy.js)

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

有关 Scrollspy 的教程，请阅读我们的Bootstrap Scrollspy 教程。

提示：Scrollspy 插件经常与词缀插入。

通过 data-* 属性

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

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

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

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

需要相对定位：data-spy="scroll" 的元素需要 CSS位置属性，值为 "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"})

亲自试一试 »

滚动间谍选项

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

Name	Type	Default	Description	尝试一下
offset	number	10	Specifies the number of pixels to offset from top when calculating the position of scroll	尝试一下

滚动间谍方法

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

Method	Description	尝试一下
.scrollspy("refresh")	When adding and removing elements from the scrollspy, this method can be used to refresh the document	尝试一下

滚动间谍活动

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

Event	Description	尝试一下
activate.bs.scrollspy	Occurs when a new item becomes activated by the scrollspy	尝试一下

更多示例

带动画滚动的 Scrollspy

如何为同一页面上的锚点添加平滑的页面滚动：

平滑滚动

// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});

// Add smooth scrolling on all links inside the navbar
$("#myNavbar 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

});

亲自试一试 »

滚动监视和粘贴

使用词缀插件与 Scrollspy 插件一起使用：

水平菜单（导航栏）

亲自试一试 »

垂直菜单 (Sidenav)

亲自试一试 »