Customizable jQuery One Page Scroll Navigator - neo-pager

Neo Pager is a robust and customizable jQuery plugin for generating a side navigation for your one page scrolling website that allows the visitor to navigate through your sectioned content with mouse wheel or by clicking on the navigation bullets.

How to use it:

1. Include jQuery library and the jQuery neo pager plugin on your html page.

<script src=//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/neo.pager.js"></script>

2. The html structure to create web page sections as follow. To show hint on bullet you need to add the attribute: data-hint-text

<div id="container">
  <div class="block1 height-block page" data-hint-text="Page 1"><h1>Page 1</h1></div>
  <div class="block2 height-block page" data-hint-text="Page 2"><h1>Page 2</h1></div>
  <div class="block3 height-block page" data-hint-text="Page 3"><h1>Page 3</h1></div>
  <div class="block4 height-block page" data-hint-text="Page 4"><h1>Page 4</h1></div>
  <div class="block5 height-block page" data-hint-text="Page 5"><h1>Page 5</h1></div>
  <div class="block6 height-block page" data-hint-text="Page 6"><h1>Page 6</h1></div>
</div>

3. Initialize the plugin without all default options.

$("#container").neo_pager();

4. The plugin will automatically generate bullets for the navigation based on your page sections. You can override or modify the default CSS as shown below to create your own navigation styles.

#dot-holder {
  position: fixed;
  right: 30px;
  top: 100px;
  width: 30px;
}

#dot-holder .page-nav-dot { list-style-type: none; }

#dot-holder .page-nav-dot span {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  margin: 10px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.3);
  border: 1px solid silver;
}

#dot-holder .page-nav-dot span:hover { background: #00aeef; }

#dot-holder .page-nav-dot span.page-nav-dot-current:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 50%;
  background: #00aeef;
  background: -moz-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00aeef), color-stop(47%, #0095CC), color-stop(100%, #00aeef));
  background: -webkit-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%);
  background: -o-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%);
  background: -ms-linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%);
  background: linear-gradient(top, #00aeef 0%, #0095CC 47%, #00aeef 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeef', endColorstr='#00aeef', GradientType=0 );
}

#dot-holder.page-nav-dot { margin: 5px 0px; }

.hint--page:after {
  background-color: #0095CC;
  text-shadow: 0 -1px 0px #00aeef;
  text-transform: capitalize;
}

.hint--page.hint--top:before {
  border-top-color: #0095CC;
  text-transform: capitalize;
}

.hint--page.hint--bottom:before {
  border-bottom-color: #0095CC;
  text-transform: capitalize;
}

.hint--page.hint--left:before {
  border-left-color: #0095CC;
  text-transform: capitalize;
}

.hint--page.hint--right:before {
  border-right-color: #0095CC;
  text-transform: capitalize;
}

5. All default options.

$("#demo").neo_pager({

// class selector for all pages
pageClass: "page", 

// id of the dot holder
parentDotId: "dot-holder", 

// current active dot
activeDotClass: "page-nav-dot-current", 

// used to animate the dot hide
dotOutAnimClass: "", 

// used to animate the dot show
dotInAnimClass: "", 

// the main dot holder class,
dotClass: "page-nav-dot", 

// doe's dot selection bar is visible
dotSelectionVisible: true, 

// if no animate class is used
dotAnimSpeed: 500, 

// if no animate class is used
dotDelay: 100, 

// how we recognize the current page 
/ 0.5 = half page, values from 0..1
pageFactorUp: 0.1, 

// how we recognize the current page
pageFactorDown: 0.9, 

// if true it will auto scroll to next current page
autoScrollPages: false, 

// animation of page scroll
pageScrollSpeed: 1000, 

// callback events
onDotHide: null,
onDotShow: null, 
onPageIn: null, 
onPageOut: null, 
onScroll: null, 
onAutoScrollStart: null,
onAutoScrollEnd: null,

// if true, plugin css will be auto created
useDefaultCss: false, 

// classes that describe hint side position, how hint will be shown, and hint style
hintClass: "hint--left hint--rounded hint--page", 

// if true it will auto generate hint css classes and styles
addHintStyle: true 

});

---

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