EasyScrollDots : Vanilla JavaScript plugin that creates navigation dots on the side of the ...

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.

EasyScrollDots : Vanilla JavaScript plugin that creates navigation dots on the side of the ...
EasyScrollDots : Vanilla JavaScript plugin that creates navigation dots on the side of the ...

Browser/OS Support

  • Windows/Mac: Chrome ✔ IE 10 & 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.

Installation

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.

Usage

Initialise

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

easyScrollDots({
  '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>
    <div class="scroll-indicator" id="section01" data-scroll-indicator-title="Hello World"></div>
</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. mysite.com/#section01

Options

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.

easyScrollDots({
  '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)

Demo

See a working demo on CodePen:

https://codepen.io/SuperHands/pen/omqWBB

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

License

MIT - Free and unrestricted use.