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

Category: Javascript , Menu & Navigation | February 6, 2021
Author:Superhands89
Views Total:1,461 views
Official Page:Go to website
Last Update:February 6, 2021
License:MIT

Preview:

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

Description:

The Easy Scroll Dots JavaScript plugin automatically generate 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:

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

You Might Be Interested In:


Leave a Reply