jQuery Plugin For One Page Sidebar Navigation - onepage.scroll
File Size: | 25.5 KB |
---|---|
Views Total: | 8763 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.