Single-Page-Scroll-EasyScrollDots

Single Page Scroll Vanilla JavaScript Plugin | EasyScrollDots

by

EasyScrollDots Quickly add anchor points across your web page/app, and vertical navigation points will automatically appear in a fixed position on the side of the page.

This allows the user to click to scroll through sections of the page, and it refreshes while scrolling.

How to make use of it:

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

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

Add the next HTML to the start of every required part. Make certain so as to add a novel id for every occasion, additionally replace 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 next 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

});

Side Navigation For One Page Scroll Web App, Easy Scroll Dots Plugin/Github

Easy-Scroll-Dots-Demo

See Demo And Download

Demo
Download

Official Website(Superhands89): Click Here

This superior jQuery/javascript plugin is developed by Superhands89. For extra Advanced Usages, please go to the official website.

Leave a Comment