Vertical Scroll Navigation Dots for the Side of Any Web Page in 2 Minutes... (Vanilla JS Plugin)

Side navigations really help users keep track of their location on a Web page, especially considering how tall many pages have become with so much content below the fold.

The difficulties associated with these kinds of pages is further exaggerated on mobile devices, whereby content is stretched into the shape of a mighty sword that the user must slide down on their own.

Some solutions to this involve breaking the page into full screen sections that can be navigated between, kind of like a PowerPoint presentation. But why limit your content to these slides? And why should navigation need to affect layout at all?

I present EasyScrollDots, which allows the user to click to scroll though sections of the page, and it updates as they scroll.

It's a nice simple vanilla JavaScript page scroll plugin that literally just requires you to drop a data attribute on the outer element of each section that should have a dot associated with it...

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

You should update "Hello World" to represent the title for that section of the page..

Here's a Demo

Some of the benefits of EasyScrollDots are that it doesn't let sticky or fixed top navigation bars get in the way when you click to scroll to a section (even if the navigation bar is only fixed when the user is scrolling upward); and you can set your own offset amount in pixels when you call the plugin.

To call the plugin you just...

easyScrollDots({
  'fixedNav': false, // Set to true if you have a fixed nav.
  'fixedNavId': '', // Set to the id of your navigation element if 'fixedNav' is true (easyScrollDots will measure the height of the element).
  'fixedNavUpward': false, // 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': 0 // Set to the amount of pixels you wish to offset the scroll amount by.
});

By default, hovering on a dot whilst using a device that supports hover will show the title for that section, whilst touch devices only show the dots. And even IE11 is supported for a laugh...

@media (hover: hover), (-ms-high-contrast: none), (-ms-high-contrast: active) {
:D :D
}

From a performance perspective, it's under 4kb of JavaScript and under 2kb of CSS. It's throttled too so there's zero impact on user experience :)

Here is the GitHub page: https://github.com/Superhands89/EasyScrollDots

And Thanks for Reading!! :D