jQuery Plugin For Smooth Vertical Scrolling Navigation

File Size: 55.9 KB
Views Total: 6733
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Smooth Vertical Scrolling Navigation

A lightweight jQuery plugin for generating a responsive side dot navigation / indicator for your one page vertical scrolling website or SPA (single page application). It enables the visitors to scrolling smoothing through page sections by clicking the navigation dots.

How to use it:

1. The plugin requires jQuery JavaScript library loaded in the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/jq-vertical-dot-nav.css">
<script src="js/jq-vertical-dot-nav.js"></script>

2. Just call the plugin on the page sections and we're done. The plugin will automatically detect the number of the section elements in the document and generate a dot navigation on the right side of the screen.

$('section').verticalDotNav();

3. Options and defaults.

$('section').verticalDotNav({
  align : "right", 
  scroll_speed : 1000,
  dot_size: 10,
  dot_style: "circle",
  dot_color: "#fff",
  nav_color: "#666"
});

Change log:

2015-12-11

  • recalculating offset on window resize

This awesome jQuery plugin is developed by maiamachine. For more Advanced Usages, please check the demo page or visit the official website.