jQuery Vertical Dot Navigation with Smooth Scroll

Simple, lite and easy to use plugin for jQuery that lets you to create vertical dot navigation with smooth scroll effect.


Plugin Overview

Plugin: jquery-vertical-dot-navigation
Author: MariWoj
Licence: MIT Licence
Published: April 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 3 KB

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>

Be the first to comment

Leave a Reply

Your email address will not be published.


*