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

Category: Javascript , Menu & Navigation | February 6, 2021
Views Total:1,461 views
Official Page:Go to website
Last Update:February 6, 2021


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,

  // the amount of pixels you wish to offset the scroll amount by
  'offset': 30



v1.1.5 (02/06/2021)

  • Added a new option to set a scroll offset when clicking on a dot.
  • Replaced window.onscroll function with an event listener so that it cannot be accidentally overwritten.
  • Slightly adjusted alignment of titles when hovering on a dot.

v1.1.4 (01/03/2021)

  • Updated

v1.1.3 (12/09/2020)

  • Improvements to z-indexing and mobile positioning


  • CSS updated


  • CSS & Demo updated

v1.1.2 (07/16/2020)

  • JS & CSS update

You Might Be Interested In:

Leave a Reply