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. |
|---|
<!-- 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
Via JavaScript
Enable manually with:
$('body').scrollspy({target: ".navbar"})
Try it
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 |
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 to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
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;
});
});
Try it Yourself »
Scrollspy & Affix
Using the Affix plugin together with the Scrollspy plugin:
Horizontal Menu (Navbar)
<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 »
Vertical Menu (Sidenav)
<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 »
