Easy Scroll Dots :

Single page scroll JavaScript plugin

Quickly add anchor points throughout your web page/application and have vertical 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.

Browser/OS Support

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

Note: Easy Scroll Dots is vanilla and has no dependencies in order to work on latest Edge, Chrome, Firefox and Safari.

Installation

Including Files

Download the lastest release and find the files in the dist folder.

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

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

Usage

Add your anchor points

Add the following attribute to the outer element of each section that should have a dot associated with it...

data-scroll-indicator-title="Hello World"

e.g.

<div data-scroll-indicator-title="Hello World">
  Content in my section lorem ipsum dolor...
</div>

Update "Hello World" to represent the title for that section of the page.

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,
  'offset': 0
});

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. You can also tell easyScrollDots if your fixed nav only appears when the user is scrolling upward. Finally, you can set an offset amount in order to adjust where the browser scrolls to when a dot is clicked.

easyScrollDots({
  'fixedNav': true, // Set to true if you have a fixed nav.
  'fixedNavId': 'myNav', // Set to the id of your navigation element if 'fixedNav' is true (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 (requires 'fixedNav' to be true and 'fixedNavId' to be a value).
  'offset': 30 // Set to the amount of pixels you wish to offset the scroll amount by (any positive number).
});

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:

DEMO

Commercial License

To use easyScrollDots on commercial projects, a commercial license is required...

Single Commercial License

This license grants you to use easyScrollDots for one project, for yourself or for one client, and for commercial use. Purchase a one-off single commercial license here. ($25 exc. VAT - Includes free support)

Extended Commercial License

This license grants you to use easyScrollDots for an unlimited amount of projects for commercial use. Purchase a one-off extended commercial license here. ($79 exc. VAT - Includes free support)

Open Source License

If your application is open source and under a GNU GPL v3 compatible license, then you can use easyScrollDots without a commercial license.