Vanilla JavaScript plugin that creates navigation dots on the side of the page for each required section
Branch: master
Clone or download
Latest commit a2f9d7d Feb 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
Demo demo added - edge hover bug fix - scroll threshold altered Feb 13, 2019
dist Delete easyScrollDots.css Feb 13, 2019
.gitattributes Update .gitattributes Feb 11, 2019
LICENSE Create LICENSE Feb 13, 2019 Update Feb 13, 2019
easyScrollDotsSnippet.html Update easyScrollDotsSnippet.html Feb 10, 2019

Easy Scroll Dots :

Quickly add anchor points throughout your web page/application and have navigational dots automatically appear in a fixed position on the side of the page. This allows the user to click to scroll though sections of the page, and it updates as they scroll.

Unlike some other plugins, Easy Scroll Dots does NOT require your web site or application to have a full page or full width slide design. Simply add your anchor points to any sections within your HTML and Easy Scroll Dots will do the rest.

Easy Scroll Dots Representation

Browser/OS Support

  • Windows/Mac: Chrome ✔ IE 11 ✔ FF ✔ Edge ✔ Opera ✔
  • Android/IOS: Chrome ✔ FF ✔ Safari ✔

Note: Easy Scroll Dots is vanilla and has no dependencies in order to work on Chrome and Firefox. However, jQuery is recommended if you need consistant and smooth animations across all of the supported browsers.


Including Files

<!-- CSS for Easy Scroll Dots -->
<link rel="stylesheet" type="text/css" href="easyScrollDots.min.css" />

<!-- JS for Easy Scroll Dots -->
<script type="text/javascript" src="easyScrollDots.min.js"></script>

Add the CSS file within your head tag, and add the JS file before the closing body tag. Update the paths depending on where you add the files within your project.



Add the following function call somewhere in your javaScript AFTER the easyScrollDots.min.js file has been loaded...

  'fixedNav': false,
  'fixedNavId': '',
  'fixedNavUpward': false

Add your anchor points

Add the folliwing HTML snippet at the start of each section of the page that should have a dot associated with it...

    <div class="scroll-indicator" id="section01" data-scroll-indicator-title="Hello World"></div>

Replace the id with something unique each time you add the snippet, and also update the data-scroll-indictaor-title to represent the title for that section of the page.

Remember, an id cannot have any spaces and cannot start with a number. Adding a unique id each time is required, and can be useful for creating deep link URLs to your content e.g.


Some sites have a fixed or sticky top navigation bar which gets in the way when easyScrollDots scrolls the browser window to the top of each section. Therefore you have to tell easyScrollDots if you have a fixed nav, and if so, you also need to provide the id of the navigation bar. Finally you can also tell easyScrollDots if your fixed nav only appears when the user is scrolling upward.

  'fixedNav': true, // Set to true if you have a fixed nav.
  'fixedNavId': 'myNav', // Set to the id of your navigation element (easyScrollDots will measure the height of the element).
  'fixedNavUpward': true // Set to true if your nav is only sticky when the user is scrolling up.

Assumptions & Prerequisites

It is assumed that your application has a body tag. (easyScrollDots appends itself to the end of the body)


See a working demo on CodePen:

The demo is using jQuery for full browser support, but jQuery is NOT required.


MIT - Free and unrestricted use.