jQuery provides a beautiful, lightweight, single page and responsive Vertical Dot Navigation plugin to programmers that help in navigating or scrolling through long web pages. The plugin identifies the number of pages or sections in the website and accordingly adds dots for click to scroll through the corresponding contents.
Please download the Vertical Dot Navigation Plugin and include the required file libraries in your working folder as shown in the head section of the following codes.
Download link: https://github.com/maiamachine/jquery-vertical-dot-navigation
Example 1: In the following example, the very basic call of verticalDotNav() method is shown using jQuery. Different page contents are provided in different sections of HTML page.
Example 2: In the following example, various options of the verticalDotNav() method are set as shown below. Just notice the alignment of dots and scrolling speed in the image output and accordingly customize in your code as per the requirement.
- How to create Vertical Navigation Bar using HTML and CSS ?
- How to select html element using ID in jQuery when ID contains a dot character ?
- jQuery | Page Piling Plugin
- jQuery | Mask Plugin
- How to create a jQuery plugin with methods?
- jQuery | Multiscroll Plugin
- jQuery | DrawSVG Plugin
- jQuery | Product Tour Plugin
- jQuery | Alertify Plugin
- jQuery | Flickerplate Plugin
- jQuery | menu-aim plugin
- jQuery | Tagsort Plugin
- jQuery | RowGrid Plugin
- jQuery | Filer Plugin
- jQuery | Logos Distort Plugin
- jQuery | Flipping Gallery Plugin
- jQuery | table2excel Plugin
- jQuery | CLNDR Plugin
- How to check if a jQuery plugin is loaded?
- jQuery Highcharts Plugin
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.