Smart One Page Scroll Navigation Plugin With jQuery - alfaNavbar

File Size: 16.1 KB
Views Total: 1919
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smart One Page Scroll Navigation Plugin With jQuery - alfaNavbar

alfaNavbar is a jQuery plugin that helps generate smart sidebar and sticky top navigation controls for your one page scrolling website. Clicking on the navigation links will navigate between content sections with a smooth page scroll animation. The top navigation menu will auto show/hide when you scroll up/down the webpage.

How to use it:

1. Add jQuery library and the jQuery alfaNavbar plugin's files to the webpage.

<script src="//"></script>
<script src="alfaNavbar.js"></script>
<link href="alfaNavbar.css" rel="stylesheet"/>

2. Create a sidebar navigation list that contains anchor links pointing to the content sections within the document.

  <div class="alfaDotNavbar">
      <li><a href="#one"><span>One</span></a></li>
      <li><a href="#two"><span>Two</span></a></li>
      <li><a href="#three"><span>Three</span></a></li>
      <li><a href="#four"><span>Four</span></a></li>
      <li><a href="#five"><span>Five</span></a></li>
  <div class="block" id="one"># 1</div>
  <div class="block" id="two"># 2</div>
  <div class="block" id="three"># 3</div>
  <div class="block" id="four"># 4</div>
  <div class="block" id="five""># 5</div>

3. Create a top navigation for the sectioned content.

<div class="alfaTopNavbar">
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">Four</a></li>
    <li><a href="#five">Five</a></li>

4. Active the navigation controls as these:

$('.alfaDotNavbar').alfaNavbar({ type: 'dotted', threshold: 'center' });
$('.alfaTopNavbar').alfaNavbar({ type: 'topped', threshold: 'center' });

5. Default plugin options.


  // animation speed
  speed: 1000,

  // CSS class for active link
  activeClass: 'active',
  // scroll threshold
  threshold: 0,

Change log:


  • Change behaviour fixed action in `topped`

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