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

Category: Javascript , Menu & Navigation | February 20, 2019
Author: Superhands89
Views Total: 136
Official Page: Go to website
Last Update: February 20, 2019
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

});

You Might Be Interested In:


Leave a Reply