Side Navigation For One Page Scroll Web App – Easy Scroll Dots

Category: Javascript , Menu & Navigation | July 16, 2020
Views Total:306 views
Official Page:Go to website
Last Update:July 16, 2020


Side Navigation For One Page Scroll Web App – Easy Scroll Dots


The Easy Scroll Dots JavaScript plugin automatically generate side navigation that indicates the current scroll position and smoothly scrolls through page sections when clicking the bullets.

How to use it:

Include the Easy Scroll Dots’ JavaScript and CSS files on the page.

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

Add the following HTML to the beginning of each required section. Make sure to add a unique id for each instance, also update data-scroll-indicator-title.

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

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

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

Initialize the Easy Scroll Dots plugin with the following parameters:


  // 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



v1.1.2 (07/16/2020)

  • JS & CSS update

You Might Be Interested In:

Leave a Reply