easyScrollDots.js | Generating a Page Navigation in One Page with JavaScript

easyScrollDots.js a javascript one page scroll library, it can generate a page navigation in one page. Users can switch the page section by clicking the bullets.

How to create a page navigation in one page using easyScrollDots.js?

1.Import easyScrollDots.css and easyScrollDots.js in your html page

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

2.Create some page sections using html div

<div>
  <div class="scroll-indicator" id="section01" data-scroll-indicator-title="First Section"></div>
</div>
<div>
  <h1>First Section</h1>
</div>
<div>
  <div class="scroll-indicator" id="section02" data-scroll-indicator-title="Second Section"></div>
</div>
<div>
  <h1>Second Section</h1>
</div>
<div>
  <div class="scroll-indicator" id="section03" data-scroll-indicator-title="Last Section"></div>
</div>
<div>
  <h1>Last Section</h1>
</div>

3.Initialize easyScrollDots with the following parameters:

easyScrollDots({
  // sets to true if you have a fixed navigation
  'fixedNav': false,
  // unique ID of your fixed navigation
  'fixedNavId': '',
  // set to true if your navigation is only sticky when scrolling up
  'fixedNavUpward': false
});