Single Page Navigation With Scrollspy - jQuery NavPoints

File Size: 71.8 KB
Views Total: 5297
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Single Page Navigation With Scrollspy - jQuery NavPoints

The NavPoints jQuery plugin helps developers to create a sticky navigation for single page web apps, with support for smooth scroll, active highlighting and hash change.

How to use it:

1. Create the html for the single page navigation containing anchor links that point to different sections within the document.

<div id="navigation">
  <div class="container">
      <a href="#section1" class="active">Section 1</a>
      <a href="#section2">Section 2</a>
      <a href="#section3">Section 3</a>

<section id="section1">
  Section 1

<section id="section2">
  Section 2

<section id="section3">
  Section 3

2. The example CSS for the single page navigation.

#navigation {
  width: 100%;
  height: 50px;
  background-color: #333;
  position: fixed;
  top: 0;
  z-index: 9999;

#navigation a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px 16px;
  text-decoration: none;
  font-size: 16px;

#navigation a:hover {
  background-color: #ddd;
  color: #000;

3. Highlight the active menu items when you scroll through page sections.

.active {
  background-color: #4caf50;
  color: #fff;

4. Import jQuery JavaScript library and the jQuery NavPoints plugin into the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.navpoints.min.js"></script>

5. Attach the plugin to the single page navigation on document ready. Done.

$(function() {

6. Customize the animation speed when smoothly scrolling through page sections. Default: 300ms.

  speed: 1000

7. Specify how far down the page section is from the top after scrolling. Default: 0.

  offset: 70

8. Customize the active class. Default: 'active'.

  currentClass: 'active'

9. Determine whether to update the URL hash on scroll. Default: false.

  updateHash: true

10. Determine whether to apply the active class to the parent container rather than nav links. Default: false.

  classToParent: true

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