jQuery Plugin For One Page Sidebar Navigation - onepage.scroll

onepage.scroll is a jQuery plugin to generate a vertical sidebar navigation with anchor tags which allow you to scroll to associated content sections with smooth animations. Typically used for single page websites.

How to use it:

1. Load the jQuery library together with jQuery onepage scroll plugin's JavaScript and CSS in the document.

<link href="css/jquery.onepage-scroll-0.0.1.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.onepage-scroll-0.0.1.min.js"></script>

2. Include the jQuery easing plugin for extra page scroll effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Create sectioned content as follows.

<div class="scroll-container">

  <div class="content-part" data-title="label-for-first">
    <div class="content-inner">First Content</div>
  </div>

  <div class="content-part" data-title="label-for-second">
    <div class="content-inner">Second Content</div>
  </div>

  <div class="content-part" data-title="label-for-third">
    <div class="content-inner">Third Content</div>
  </div>

  ...

</div>

4. Call the plugin on the parent container.

$(document).ready(function () {
  $('.scroll-container').onePageScroll({
    sectionSelector: $('.content-part')
  });
});

5. All the default parameters。

//is an Element Class for the Content Parts as jQuery Selector 
//jQuery selector (required)
sectionSelector: $('.selector'),

//set the Top referenz to set the "Aktiv Zone Beginning" of the content parts
//integer (optional) default: 50
topMargin: 50,

//set the Top referenz from the height() value of the given element  
//jQuery selector (optional)
topElement: $('header'),

//additional value that's added to topMargin to move the "Aktiv Zone Beginning" down
//integer (optional) default: 10
offsetAktiv: 10,

//set the position of the navigation container
//string 'right' or 'left' (optional) default: 'right' 
position: 'right',

//option to create navigation buttons on empty content section
//boolean (optional) default: false
emptyContent: false,

//set the easing value for page scroll
//string (optional) default: 'easeInOutQuart'
ease: 'easeInOutQuart',

//set the time of the scroll duration
//integer (optional) default: 1000
animationDuration: 1000,

//activate key navigation to navigate with the page up and down buttons
//boolean (optional) default: true
keyNavigation: true,

//activate the tooltips
//default tooltip text from data-title="" attribute of content part
//boolean (optional) default: true
tooltip: true,

//set the tooltip text from the html() value of an element
//jQuery selector (optional) 
tooltipSelector: $('h3'),

//set the color of Tooltip
//css value string (optional) default: '#ffffff'
tooltipColor: '#ffffff',

//set the background of the Tooltip
//css value string (optional) default: rgba(0,0,0,0.8)
tooltipBackground: 'rgba(0,0,0,0.8)',

//set the border of the navigation container (normal css)
//string css value (optional) default: '1px solid rgba(0,0,0,0.2)'
borderNavigation: '1px solid red',

//set the background of the navigation container
//string css value (optional) default: 'rgba(80,80,80,0.6)'
background: 'rgba(0,0,0,0.8)',

//set the border radius or the navigation container
//integer (optional) default: 10
borderRadius: 10,

//set the width of each navigation item
//integer (optional) default: 40
naviItemWidth: 40,

//set the width of each navigation item
//integer (optional) default: 30
naviItemHeight: 30,

//set the color of the navigation buttons
//string css value (optional) default: '#c2c2c2'
buttonColor: '#c2c2c2', 

//set the color of the navigation button for aktiv content part
//string css value (optional) default: '#ffffff'
buttonColorAktiv: '#ffffff', 

//set the width and height of the navigation buttons
//integer (optional) default: 10
buttonSize: 10 ,

//set the border of the navigation buttons
//string css value (optional) default: '1px solid #ffffff'
buttonBorder: '1px solid #ffffff',

//set the border radius of the buttons
//integer (optional) default: 6
buttonBorderRadius: 6 

6. Destroy the plugin.

 $('.container').onePageScrollDestroy()

Change logs:

2015-01-06

• add destroy method.

2014-12-07

• add IE8 support with default style

2014-12-07

• change hover state for mobile

---

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