Versatile Single Page Navigation Generator – scrollNav.js

Preview:

Description:

scrollNav.js  is a JavaScript library used to automatically generate a nav list from heading elements (or any other header elements) so that the users are able to quickly navigate between page sections within your long web app.

Also provides a Scrollspy functionality that automatically highlights the active list item when the users reach the corresponding page section on page scroll.

Ideal for one page scroll navigation and table of contents (TOC).

How to use it:

Installation & Download:

# NPM
$ npm install scrollnav --save

Import the scrollNav.js into your document.

<script src="/dist/scrollnav.min.umd.js"></script>

Create content sections on the page.

<div class="mainContent">
  <h2>Section 1</h2>
  ...
  <h2>Section 2</h2>
  ...
  <h2>Section 3</h2>
  ...
  <h2>Section 4</h2>
  ...
  <h2>Section 5</h2>
  ...
</div>

Initialize the library on the top container.

const content = document.querySelector('.mainContent');
scrollnav.init(content);

Apply your own styles to the navigation list.

.scroll-nav__list {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}
.scroll-nav__list:after {
  content: "";
  display: table;
  clear: both;
}
.scroll-nav__item {
  margin-bottom: 5px;
  float: left;
  margin-right: 15px;
  border-bottom: 1px solid transparent;
}
.scroll-nav__item--active {
  font-weight: 600;
  border-bottom-color: white;
}
.scroll-nav__link {
  color: white;
  text-decoration: none;
}

Options and defaults.

scrollnav.init(content,{
  // heading element
  sections: 'h2',
  // where to insert the navigation list
  insertTarget: elem,
  // or 'after'
  insertLocation: 'before',
  // easing
  easingStyle: 'easeOutQuad',
  // sets the history behavior when a nav item is clicked
  updateHistory: true
  
});

Update the current scroll position.

scrollnav.updatePositions();

Destroy the library.

scrollnav.destroy();