Side Navigation For One Page Scroll Web App – Easy Scroll Dots

Preview:

Description:

The Easy Scroll Dots JavaScript plugin automatically generates side navigation that indicates the current scroll position and smoothly scrolls through page sections when clicking the bullets.

How to use it:

Include the Easy Scroll Dots’ JavaScript and CSS files on the page.

<link href="dist/easyScrollDots.css" rel="stylesheet">
<script src="dist/easyScrollDots.js"></script>

Add the following HTML to the beginning of each required section. Make sure to add a unique id for each instance, also update data-scroll-indicator-title.

<div>
  <div class="scroll-indicator" id="section01" data-scroll-indicator-title="First Section"></div>
</div>
<div>
  <h1>First Section</h1>
</div>
<div>
  <div class="scroll-indicator" id="section02" data-scroll-indicator-title="Second Section"></div>
</div>
<div>
  <h1>Second Section</h1>
</div>
<div>
  <div class="scroll-indicator" id="section03" data-scroll-indicator-title="Last Section"></div>
</div>
<div>
  <h1>Last Section</h1>
</div>

Initialize the Easy Scroll Dots plugin with the following parameters:

easyScrollDots({
  // sets to true if you have a fixed navigation
  'fixedNav': false,
  // unique ID of your fixed navigation
  'fixedNavId': '',
  // set to true if your navigation is only sticky when scrolling up
  'fixedNavUpward': false,
  // the amount of pixels you wish to offset the scroll amount by
  'offset': 30
});

Changelog:

v2.0.3 (08/19/2022)

• Make sure that offset is always relative to the document rather than the closest relative parent when clicking a dot.

v2.0.2 (02/21/2022)

• JS update

v2.0.1 (02/18/2022)

• Remove escape string from calc function in scss file as it is only applicable to legacy less compilers.

v2.0.1 (02/18/2022)

• Breaking change: Anchor points now should wrap each section rather than appear before each section. This makes the active dot much more accurate according to the section beginning and end. This is achieved by dynamically adding a placeholder final section and always looking at the previous section rather than the current one; the benefit of this is we don’t need to measure the height of any section.
• Removed unnecessary use of scroll-indicator class name as we can just look for the data attribute.
• Removed legacy jQuery fall-back support.
• *We are querying the DOM for indiElement only once now rather than unnecessarily querying twice.

v1.1.5 (02/06/2021)

• Added a new option to set a scroll offset when clicking on a dot.
• Replaced window.onscroll function with an event listener so that it cannot be accidentally overwritten.
• Slightly adjusted alignment of titles when hovering on a dot.

v1.1.4 (01/03/2021)

• Updated

v1.1.3 (12/09/2020)

• Improvements to z-indexing and mobile positioning

12/07/2020

• CSS updated

12/04/2020

• CSS & Demo updated

v1.1.2 (07/16/2020)

• JS & CSS update