Current Content Section Indicator Plugin With jQuery - Scroll-Sub-Menu

Scroll-Sub-Menu is a jQuery plugin for creating animated in-page navigation links that will auto update to indicate which content section you're viewing on. Similar to the scrollspy jQuery plugins and supports unlimited sub sections. Click on the navigation links will navigate through the content sections with a smooth scrolling animation. Great for one page scrolling websites and single page web applications.

How to use it:

1. Include the jQuery Scroll-Sub-Menu plugin's CSS file in the header of your webpage.

<link rel="stylesheet" href="scroll-sub-menu.min.css">

2. Create content sections following the html structure as this:

<div id="cont1" class="section">
  <h1>Section 1</h1>
  <div data-ssm-title="section1 sub-section1" class="sub-section ssm-section">
  <h2>Section 1 - Sub-section 1</h2>
  </div>
  <div data-ssm-title="section1 sub-section2" class="sub-section ssm-section">
  <h2>Section 1 - Sub-section 2</h2>
  </div>
  <div data-ssm-title="section1 sub-section3" class="sub-section ssm-section">
  <h2>Section 1 - Sub-section 3</h2>
  </div>
  <div data-ssm-title="section1 sub-section4" class="sub-section ssm-section">
  <h2>Section 1 - Sub-section 4</h2>
  </div>
</div>

3. Include jQuery library and the jQuery Scroll-Sub-Menu plugin's JavaScript at the bottom of your webpage.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="jquery.scroll-sub-menu.min.js"></script>

4. Active the plugin and you're done.

$('#cont1').ScrollSubMenu();

5. Default plugin settings to config the in-page navigation.

$('#cont1').ScrollSubMenu({

  // jQuery Object | string
  menuTarget : null,

  // String [top|middle|bottom] | Number
  lineActive : 'middle',

  // String [top|middle|bottom] | Number
  deltaSectionEnd: 'middle',

  // default CSS classes & attributes
  subSelector: 'ssm-section',
  animWhileClass: 'ssm-radar',
  activeClass: 'ssm-sub-active',
  pillsActiveClass: 'ssm-pills-active',
  wrapperAttrs: {class: 'ssm-sub-menu'},
  elementAttrs: {class: 'ssm-elmt'},
  pillsAttrs: {class: 'ssm-pills ssm-cn'},
  navPillsAttrs: {class: 'ssm-nav-pills'},
  wrapperCSS: {},
  elementCSS: {},
  pillsCSS: {},
  navPillsCSS: {},

  // number
  animWhileDelay: 100,
  animWhileEnd: 1000,

  // callback events
  animExitFn: null,
  animEnterFn: null,
  animWhileFn: null,
  clickHandlerFn: null,
  elementCreateCallback: null,
  scrollStepCallback: null

  // options of smooth scroll
  scrollSpeed: 200,
  scrollEasing: 'swing',
  
});

Change log:

2017-11-09

• add smooth scroll settings

---

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