Single Page Navigation Plugin For jQuery - singlePageNav.js

Just another single page navigation plugin with jQuery that provides scrollspy and smooth scroll functionalities for your one page scrolling website and single page app.

Features:

• Highlights active menus as you scroll past their sections.
• Smoothly scrolls through content sections as you click menus.

How to use it:

1. Create the singe page navigation.

<ul class="menu__container  js-menu">
  <li class="menu__element  active">
    <a href="#home" class="menu__link">Home</a>
  </li>
  <li class="menu__element">
    <a href="#service" class="menu__link">Service</a>
  </li>
  <li class="menu__element">
    <a href="#portfolios" class="menu__link">Portfolios</a>
  </li>
  <li class="menu__element menu__element_no-clickable">
    <a href="#about" class="menu__link">About</a>
  </li>
  <li class="menu__element  menu__element_except">
    <a href="https://google.com" target="_blank" class="menu__link">[Exeption]</a>
  </li>
  <li class="menu__element">
    <a href="#contacts" class="menu__link">Contacts</a>
  </li>
</ul>

2. Create the content sections.

<section class="home" id="home">
  <h2 class="section-header">Home</h2>
  <p class="section-content">Home Section</p>
</section>

<section class="service" id="service">
  <h2 class="section-header">service</h2>
  <p class="section-content">Servide Section</p>
</section>

<section class="portfolios" id="portfolios">
  <h2 class="section-header">portfolios</h2>
  <p class="section-content">Portfolio Section</p>
</section>

...

3. Active the single page navigation as this:

$(".js-menu").singlePageNavigation({

  // Class of except items 
  // default:  ""
  exceptClass : "menu__element_except",     

  // Class of disabled items
  // default:  ""
  disabledClass : "menu__element_no-clickable", 

  // active class name
  // default:  "current"
  current : "active",               

  // Scrolling speed (ms)
  // default:  700
  duration : 500,                 

  // Delay before scrolling
  // default:  0
  delay : 300,                  

  // Easing effect
  // default:  "swing"
  ease : "swing",                 

  // Top offset ([jquery element], [0 - xxx (px)])
  // default:  0
  offset : header,                

  // Sets dynamic height for offset element
  // default : false
  offsetDynamic : 'innerHeight',       

  // Offset bottom (0.00 - 1.00 - percents (0.45 = 45% of window height), 1 - xxx - pixels)
  // default:  0   
  scrollingOffsetBottom : 0.4,          

  // Changes address location
  // default:  false
  changeAddress : false,              

  // Clickable of current nav element
  // default:  true
  currentClickable : true,            

  // Function executed before scrolling
  // default:  null
  beforeScrolling : function(){         
    console.log("start scrolling");

    if($(".btn-container").hasClass("change")){
      $(".btn-container").removeClass("change");
      menuShowHide(150);
    }
  },

  // Function executed after scrolling
  // default:  null
  finishScrolling : function(){         
    console.log("finish scrolling");
  }
  
});

---

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