Smooth Scroll & Scrollspy Plugin For Bootstrap Fixed Navbar

A really simple jQuery plugin that adds the smooth scroll and scrollspy functionalities to the Bootstrap's fixed top navbar component.

Features:

• Smooth scrolling animation.
• Change the color of menu elements when scrolling.
• Without the needed of Bootstrap JS.

How to use it:

1. Create a fixed top navbar as follow. Be sure that you first have Bootstrap's style sheet loaded.

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container ">
    <ul class="nav navbar-nav">
      <li class="active" data-anchor="about"><a href="#about">ABOUT</a></li>
      <li data-anchor="portfolio"><a href="#portfolio">PORTFOLIO</a></li>
      <li data-anchor="contact"><a href="#contact">CONTACT</a></li>
      <li data-anchor="feedback"><a href="#feedback">FEEDBACK</a></li>
    </ul>
  </div>
</nav>

2. Create content sections with corresponding IDs defined in the data-anchor as you seen above.

<div id="about">
  ...
</div>

...

3. Include jQuery library and the main JavaScript file fixed-top-animated-menu.1.0.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="fixed-top-animated-menu.1.0.js"></script>

4. Change the color of your menu link when getting active.

.active a { background-color: cadetblue }

---

This awesome jQuery plugin is developed by danny3b. For more Advanced Usages, please check the demo page or visit the official website.