Scrollspy プラグインは、スクロール位置に基づきナビゲーション・リスト内のリンクを自動更新するために使用します。
Scrollspy に関するチュートリアルは、Bootstrap Scrollspy チュートリアルを お読みください。
チップ: Scrollspy プラグインは、大抵 Affix プラグイン と一緒に使用されます。
スクロール領域として使用される要素に data-spy="scroll" を追加します
（大抵は、<body> 要素です）。
次に、id の値またはナビゲーションバー（.navbar）のクラス名を持った data-target 属性を
追加します。これは、ナビゲーションバーをスクロール領域に確実に接続するためです。
スクロール要素は、ナビゲーションバーのリスト項目内のリンクの ID と一致しなければならないことに注意してください
（<div id="section1"> は <a href="#section1"> に一致します）。
オプションの data-offset 属性は、スクロールの位置を計算する際に先頭からのオフセットするピクセル数を指定します。
スクロール要素にジャンプするとき、ナビゲーションバー内のリンクがアクティブ状態に変更されるのが、
あまりにも速過ぎ、または早すぎると感じるときに便利です。デフォルトは 10 ピクセルです。
相対配置指定が必要：data-spy="scroll" を持つ要素を正常に動作させるには、値が "relative" で ある CSS position プロパティを必要とします。
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav
class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Try it Yourself »
手動で有効にします：
オプションは、data 属性または JavaScript を介して渡すことができます。data 属性については、 data-offset="" のように、data- の後にオプション名を追加します。
| 名前 | 型 | デフォルト | 説明 | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll | Try it |
次の表は、使用できる全 scrollspy メソッドの一覧です。
| メソッド | 説明 | Try it |
|---|---|---|
| .scrollspy("refresh") | scrollspy から要素を追加と削除をする場合、このメソッドは、文書を最新表示するために使用することがでる | Try it |
次の表は、使用できる全scrollspyイベントの一覧です。
| イベント | 説明 | Try it |
|---|---|---|
| activate.bs.scrollspy | 新しい項目が、scrollspy によりアクティブ化されたときに発生する | Try it |
同じページ上のアンカーにスムーズなページスクロールを追加する方法：
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a 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 (the speed of the animation)
$('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 statement
});
});
Try it Yourself »
Scrollspy プラグインと一緒に Affix プラグイン使用します：
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Try it Yourself »
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
Try it Yourself »