Bootstrap ScrollSpy

In this tutorial you will learn how to create scrollspy with Bootstrap.

Creating ScrollSpy with Bootstrap

The Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page more elegant and accessible, if you are using the bookmark links for directing the visitors to the different sections of a page that has a huge amount of content. Here's a typical example of Bootstrap scrollspy.

示例

Try this code »

<body data-spy="scroll" data-target="#myScrollspy">

```
<div class="container">
```
```
    <div class="row">
```

        <div class="col-sm-3" id="myScrollspy">

            <ul class="nav nav-tabs nav-stacked" data-offset-top="120" data-spy="affix">

                <li class="active"><a href="#section1">Section One</a></li>

                <li><a href="#section2">Section Two</a></li>

                <li><a href="#section3">Section Three</a></li>

```
            </ul>
```
```
        </div>
```
```
        <div class="col-sm-9">
```
```
            <div id="section1">
```
```
                <h2>Section One</h2>
```

                <p>This is section one content…</p>

```
            </div>
```
```
            <hr>
```
```
            <div id="section2">
```
```
                <h2>Section Two</h2>
```

                <p>This is section two content…</p>

```
            </div>
```
```
            <hr>
```
```
            <div id="section3">
```
```
                <h2>Section Three</h2>
```

                <p>This is section three content…</p>

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```
```
</body>
```

Note: The Bootstrap scrollspy plugin requires the use of a Bootstrap nav component (e.g. navbar, nav tabs or pills) for proper highlighting of active links.

Creating ScrollSpy via Data Attributes

You can easily add scrollspy behavior to your topbar navigation via data attributes without writing a single line of JavaScript code. Let's check out the following example:

示例

Try this code »

<body data-spy="scroll" data-target="#myNavbar" data-offset="70">

    <nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">

```
        <div class="container">
```

            <!-- Brand and toggle get grouped for better mobile display -->

```
            <div class="navbar-header">
```

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

```
                </button>
```

                <a class="navbar-brand" href="#">Scrollspy</a>

```
            </div>
```

            <!-- Collection of nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="navbarCollapse">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#section1">Section 1</a></li>

                    <li><a href="#section2">Section 2</a></li>

                    <li><a href="#section3">Section 3</a></li>

                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>

                        <ul class="dropdown-menu">

                            <li><a href="#section4dot1">Section 4.1</a></li>

                            <li><a href="#section4dot2">Section 4.2</a></li>

                            <li><a href="#section4dot3">Section 4.3</a></li>

```
                        </ul>
```
```
                    </li>
```

                    <li><a href="#section5">Section 5</a></li>

```
                </ul>
```
```
            </div>
```
```
        </div>
```
```
    </nav>
```
```
    <div class="container">
```
```
        <div id="section1">
```
```
            <h2>Section 1</h2>
```

            <p>This is section 1 content…</p>

```
        </div>
```
```
        <hr>
```
```
        <div id="section2">
```
```
            <h2>Section 2</h2>
```

            <p>This is section 2 content…</p>

```
        </div>
```
```
        <hr>
```
```
        <div id="section3">
```
```
            <h2>Section 3</h2>
```

            <p>This is section 3 content…</p>

```
        </div>
```
```
        <hr>
```
```
        <h2>Section 4</h2>
```

        <p>This is section 4 content</p>

```
        <div id="section4dot1">
```
```
            <h3>Section 4.1</h3>
```

            <p>This is section 4.1 content…</p>

```
        </div>
```
```
        <div id="section4dot2">
```
```
            <h3>Section 4.2</h3>
```

            <p>This is section 4.2 content…</p>

```
        </div>
```
```
        <div id="section4dot3">
```
```
            <h3>Section 4.3</h3>
```

            <p>This is section 4.3 content…</p>

```
        </div>
```
```
        <hr>
```
```
        <div id="section5">
```
```
            <h2>Section 5</h2>
```

            <p>This is section 5 content…</p>

```
        </div>
```
```
    </div>
```
```
</body>
```

You might be thinking what this code was all about. Ok, let's go through each part of this scrollspy code one by one for a better understanding.

Explanation of Code

The Bootstrap scrollspy has basically two components — the target nav (e.g. navbar, nav tabs or pills) and the scrollable area to spy on, which is often the <body> section.

The data-spy="scroll" attribute (line no-01) is applied to the scrollable element that is being spied on, which is the <body> element.
The data-target attribute is added on the scrollable element with the ID or class of the parent element of the Bootstrap .nav component so that nav links can be targeted by the scrollspy for highlighting purpose.
The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. Adjust the offset value if the targeted links are highlighting too early or too late. The default value is 10 pixels.

Rest of the thing is self explanatory, such as the .navbar element specifies a Bootstrap navbar, the element <div id="section1"></div> (line no-33) create a bookmark with the id attribute, whereas the element <a href="#section1">Section 1</a> (line no-17) add a link to this bookmark, from within the same page, and so on.

Creating ScrollSpy via JavaScript

You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $("body").scrollspy({
```
```
        target: "#myNavbar",
```
```
        offset: 70
```
```
    }) 
```
```
});
```
```
</script>
```

Options

There are certain options which may be passed to scrollspy() Bootstrap method to customize the functionality of a scrollspy.

Name	类型	Default Value	说明
offset	number	10	Number of pixels to offset from top when calculating position of scroll.

You can also set this options for scrollspy using the data attributes — just append the option name to data-, like data-offset="0".

Methods

These are the standard bootstrap's scrollspy methods:

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like this:

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $('[data-spy="scroll"]').each(function(){

        var $spy = $(this).scrollspy('refresh');

```
    }); 
```
```
});
```
```
</script>
```

Events

Bootstrap's scrollspy class includes few events for hooking into scrollspy functionality.

事件	说明
activate.bs.scrollspy	This event fires whenever a new item becomes activated by the scrollspy.

The following example displays an alert message to the user when a new item becomes highlighted by the scrollspy.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $("#myNavbar").on("activate.bs.scrollspy", function(){

        var currentItem = $(".nav li.active > a").text();

        $("#info").empty().html("Currently you are viewing - " + currentItem);

```
    })
```
```
});
```
```
</script>
```

Bootstrap ScrollSpy

Creating ScrollSpy with Bootstrap

示例

Creating ScrollSpy via Data Attributes

示例

Explanation of Code

Creating ScrollSpy via JavaScript

示例

Options

Methods

.scrollspy('refresh')

示例

Events

示例

关于我们

联系方式

互动工具