Adding ScrollSpy to the navbar
Let's configure our top navbar to indicate our location on the page. We'll add Bootstrap's ScrollSpy behavior to the navbar:
Note
Refer to Bootstrap's ScrollSpy plugin documentation at http://getbootstrap.com/javascript/#scrollspy.
Open
index.htmlin your editor.Add these ScrollSpy attributes to the
bodytag:<body data-spy="scroll" data-target=".navbar">Note
If you include more than one navbar in a page, you will need to be more specific with the
data-targetattribute—probably giving your ScrollSpy navbar an ID such asid="navbar-primary"and using that for thedata-targetvalue instead.With these new attributes in place, save the file, refresh your browser, and scroll up and down the page. You should see your main navigation respond as it should, indicating your position on the page as shown in the following screenshot:
Animating the scroll
Now, let's animate the page scrolls that will be triggered by clicking on the navbar page anchors. This requires adding...
