jQuery Plugin For One Page Scroll Navigation - Menu Anchor

Menu Anchor is a jQuery plugin that automatically generates sticky anchor links which allow you to scroll smoothly through different sections on the vertical one-page scrolling website. Licensed under the Apache License.

How to use it:

1. Add a list of navigation items to the webpage.

<nav id="container" class="anchor-menu">
  <h3>Navigation</h3>
  <ul>
    <li id="menu-anchor-section1"><a href="#">Section 1</a></li>
    <li id="menu-anchor-section2"><a href="#">Section 2</a></li>
    <li id="menu-anchor-section3"><a href="#">Section 3</a></li>
  </ul>
</nav>

2. Add content sections with corresponding IDs to the webpage as displayed below.

<div id="menu-anchor-section1-content">
  Section One
</div>

<div id="menu-anchor-section2-content">
  Section Two
</div>

<div id="menu-anchor-section3-content">
  Section Three
</div>

3. Add jQuery JavaScript library and the jQuery Menu Anchor plugin to the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.menu-anchor.min.js"></script>

4. Initialize the plugin to generate a sticky navigation containing anchor links for your one page scrolling website.

$('#container').MenuAnchor();

5. Style the One Page Scroll Navigation whatever you like.

.anchor-menu {
  line-height: 1.5;
  margin: 150px auto;
  width: 300px;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  background: #fff;
  z-index: 100;
  position: fixed;
  right: 0;
}

.anchor-menu h3 {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 0px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: #a90329;
  /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
  /* IE10+ */
  background: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);/* W3C */
}

.anchor-menu ul {
  background: #fff;
  font-size: 12px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

.anchor-menu ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #222;
  display: block;
  width: 300px;
}

.anchor-menu li {
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.anchor-menu li:hover { background: #eee; }

.anchor-menu .selected {
  font-weight: bold;
  background: #ccc;
}

6. Possible plugin options.

$('#container').MenuAnchor({

  // The current document object
  window: window.top,

  // The prefix of navigations id will be use
  pluralId: 'menu-anchor-',

  // The postfix of contents id will be use
  contentPostfix: '-content',

  // update the current selected anchor
  scroll: true
  
});

---

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