jQuery Plugin For Auto One Page Scroll Navigation - Section Scroll

Section Scroll is a lightweight jQuery plugin for automatically generate a side bullet navigation on your one page scrolling website. Clicking on the navigation to scrolling smoothly through the different sections.and automatically selects the correct navigation items.

Basic usage:

1. Load the jQuery library together with the Section Scroll plugin's JavaScript and CSS files in the html page.

<link rel="stylesheet" href="css/section-scroll.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.section-scroll.js"></script>

2. Load the jQuery easing plugin for more easing effects.

<script src="js/jquery.easing.1.3.js"></script>

3. Add the CSS class 'scrollable-section' to sectioned content within the document. The 'data-section-title' attribute is used to specify the text labels for navigation items.

<div class="scrollable-section" 
     data-section-title="Section One">
</div> 
<div class="scrollable-section" 
     data-section-title="Section Two">
</div> 
<div class="scrollable-section" 
     data-section-title="Section Three">
</div> 

4. Initialize the plugin and we're done.

$('body').sectionScroll();

5. Plugin's default options.

$('body').sectionScroll({

  // CSS class for bullet navigation
  bulletsClass: 'section-bullets',

  // CSS class for sectioned content
  sectionsClass: 'scrollable-section',

  // scroll duration in ms
  scrollDuration: 1000,

  // displays titles on hover
  titles: true,

  // top offset in pixels
  topOffset: 0,

  // easing opiton
  easing: ''
  
}); 

6. Execute a function when a section is scrolled into view.

$('body').on('section-reached', function(){ 
  // do something
})

Change logs:

2016-05-12

• Fix 'Uncaught TypeError: Cannot read property '0' of undefined' error

2016-02-15

• Major refactoring / performance improvements

2016-01-26

• Bug Fix

About author:

Author: m-danish-iqbal

Website: http://plugins.imdanishiqbal.com/section-scroll/

---

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