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.
- 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 latest Edge, Chrome, Firefox and Safari. However, jQuery is recommended if you need consistant and smooth animations on Old Edge.
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.
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
});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 different each time you add the snippet, and also update the data-scroll-indicator-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
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.
});It is assumed that your application has a body tag. (easyScrollDots appends itself to the end of the body)
See a working demo:
The demo is using jQuery for Old Edge support, but jQuery is NOT required.
To use easyScrollDots on commercial projects, a commercial license is required...
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)
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)
If your application is open source and under a GNU GPL v3 compatible license, then you can use easyScrollDots without a commercial license.