Bootstrap JS Scrollspy

JS Scrollspy (scrollspy.js)

The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.

For a tutorial about Scrollspy, read our Bootstrap Scrollspy Tutorial.

Tip: The Scrollspy plugin is often used together with the Affix plugin.

Via data-* Attributes

Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).

Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

Note that scrollable elements must match the ID of the links inside the navbar's list items (<div id="section1"> matches <a href="#section1">).

The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.

Requires relative positioning: The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.

Example

<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>

Try it Yourself »

Via JavaScript

Enable manually with:

Example

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

Try it Yourself »

Scrollspy Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	Type	Default	Description	Try it
offset	number	10	Specifies the number of pixels to offset from top when calculating the position of scroll	Try it

Scrollspy Methods

The following table lists all available scrollspy methods.

Method	Description	Try it
.scrollspy("refresh")	When adding and removing elements from the scrollspy, this method can be used to refresh the document	Try it

Scrollspy Events

The following table lists all available scrollspy events.

Event	Description	Try it
activate.bs.scrollspy	Occurs when a new item becomes activated by the scrollspy	Try it

More Examples

Scrollspy with animated scroll

How to add a smooth page scroll to an anchor on the same page:

Smooth scrolling

// 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

});

Try it Yourself »

Scrollspy & Affix

Using the Affix plugin together with the Scrollspy plugin:

Horizontal Menu (Navbar)

Try it Yourself »

Vertical Menu (Sidenav)

Try it Yourself »

❮ Previous Next ❯