jQuery Plugin For One Page Scroll Navigation - Menu Anchor

File Size: 13.3 KB KB
Views Total: 4439
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
    <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>

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

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

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

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

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.


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.


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