jQuery Vertical Dot Navigation with Smooth Scroll

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	jquery-vertical-dot-navigation
Author:	MariWoj
Licence:	MIT Licence
Published:	January 11, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	3 KB

Demo Download

How to Use Vertical Dot Navigation :

1. Load the jQuery and dot navigation‘s CSS and JavaScript file into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Dot Navigation JS -->
<script src="js/script.js"></script>

<!-- Dot Navigation CSS -->
<link rel="stylesheet" href="css/style.css">

2. Create section element with the following classes and put your contents in them.

    <section class="sec1">
	   <!-- Your contents -->
	</section>
    <section class="sec2">
	   <!-- Your contents -->	
	</section>
    <section class="sec3">
	   <!-- Your contents -->
	   	</section>
    <section class="sec4">
		   <!-- Your contents -->
	</section>

3. After that, create nav element that contains list of dots that will be used to navigate sections with smooth scrolling.

    <nav>
        <ul>
            <li class="dot1" id="ec1"></li>
            <li class="dot2" id="ec2"></li>
            <li class="dot3" id="ec3"></li>
            <li class="dot4" id="ec4"></li>
        </ul>
    </nav>

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.