Vertical Dot Navigation Plugin

In this article, we will understand about the vertical dot navigation plugin in detail with the help of an example. Vertical Dot Navigation plugin identifies the number of pages or sections in the website and accordingly adds dots for click to scroll through the corresponding contents.

Example 1:

<! DOCTYPE HTML>
<html>
<head>
  <meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
  <title> Example of Vertical Dot Navigation Plugin  </title>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>
html
{ height: 100%; } 
*
{ margin: 0;
  padding: 0; }
body
{ font: normal 15px 'trebuchet ms', arial, sans-serif;
  background: #FFF url(background.png) repeat;
  color: #777;word-break: break-all; }
p
{ padding: 0 0 20px 0;
  line-height: 1.7em; }
img
{ border: 0; }
h1, h2, h3, h4, h5, h6 
{ font: bold 28px 'century gothic', arial, sans-serif;
  color: #068900;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0; 
  text-align: center; }
h2
{ font: normal 115% 'century gothic', arial, sans-serif;
  color: #068900; }
h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: normal 25px arial, sans-serif;
  color: #068900; }
h5, h6
{ font: italic 21px arial, sans-serif;
  padding: 0 0 15px 0;
  color: #000; }
h6
{ color: #362C20; }
a, a:hover
{ outline: none;
  text-decoration: underline;
  color: tomato; }
a:hover
{ text-decoration: none; }
.left
{ float: left;
  width: auto;
  margin-right: 10px; }
.right
{ float: right; 
  width: auto;
  margin-left: 10px; }
.center
{ display: block;
  text-align: center;
  margin: 20px auto; }
blockquote
{ margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF; }
ul
{ margin: 2px 0 22px 17px; }
ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px; }
ol
{ margin: 8px 0 22px 20px; }
ol li
{ margin: 0 0 11px 0; }
#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto; }
#header
{ height: 240px; }
#logo
{ width: 80%;
  position: relative;
  margin-bottom: 45px; }
#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0; }
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0;
  color: #000;
  letter-spacing: 0.1em;
  text-decoration: none; }
#logo_text h1 a .logo_colour
{ color: #068900; }
#logo_text h2
{ font-size: 15px;
  padding: 4px 0 0 0;
  color: #676767; }
#menubar
{ width: 80%;
  height: 72px;
  padding: 0;
  background: transparent url(transparent.png) repeat; } 
ul#menu, ul#menu li
{ float: left;
  margin: 0; 
  padding: 0; }
ul#menu li
{ list-style: none; }
ul#menu li a
{ letter-spacing: 0.1em;
  font: normal 15px arial, sans-serif;
  display: block; 
  float: left; 
  height: 37px;
  padding: 29px 26px 6px 26px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid #068900;
  background: transparent; } 
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
  background: #068900; }
#site_content
{ width: 80%;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 20px 20px 20px 20px;
  background: transparent url(transparent_light.png) repeat; } 
.sidebar
{ float: right;
  width: 190px;
  padding: 0 15px 20px 15px; }
.sidebar ul
{ width: 178px; 
  padding: 4px 0 0 0; 
  margin: 4px 0 30px 0; }
.sidebar li
{ list-style: none; 
  padding: 0 0 7px 0; }
.sidebar li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
  display: block;
  background: transparent url(link.png) no-repeat left center; } 
.sidebar li a.selected
{ color: #444;
  text-decoration: none; } 
#content
{ text-align: left;
  padding: 0; }
#content ul
{ margin: 2px 0 22px 0px; }
#content ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em; }
#footer
{ width: 900px;
  font: normal 15px 'lucida sans unicode', arial, sans-serif;
  height: 33px;
  padding: 24px 0 5px 0;
  text-align: center; 
  background: transparent url(transparent.png) repeat;
  color: #FFF;
  text-transform: uppercase;
  letter-spacing: 0.1em; }
#footer a
{ color: #FFF;
  text-decoration: none; }
#footer a:hover
{ color: #FFF;
  text-decoration: underline; }
footer {
    background: #068900;
    height: 350px;
}
footer h2 {
    color:  #fff;
    font-size: 28px;
    width: 80%;
    margin: auto;
}
.search
{ color: #5D5D5D; 
  border: 1px solid #BBB; 
  width: 134px; 
  padding: 4px; 
  font: 100% arial, sans-serif; } 
#colours
{ height: 0px;
  text-align: right;
  padding: 66px 16px 0px 300px; }
.form_settings
{ margin: 15px 0 0 0; }
.form_settings p
{ padding: 0 0 4px 0; }
.form_settings span
{ float: left; 
  width: 200px; 
  text-align: left; }
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 299px; 
  font: 15px arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F; }
.form_settings .submit
{ font: 15px arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #068900; 
  color: #FFF; }
.form_settings textarea, .form_settings select
{ font: 15px arial; 
  width: 299px; }
.form_settings select
{ width: 310px; }
.form_settings .checkbox
{ margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none; }
.separator
{ width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;}
table
{ margin: 10px 0 30px 0;}
table tr th, table tr td
{ background: #3B3B3B;
  color: #FFF;
  padding: 7px 4px;
  text-align: left; }
table tr td
{ background: #F0EFE2;
  color: #47433F;
  border-top: 1px solid #FFF;}
.scroll-indicator-controller {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  right: 20px;
  z-index: 2;
}
@media (max-width: 1024px) {
  .scroll-indicator-controller {
    right: 10px;
  }
}
.scroll-indicator-controller > div {
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50%;
  border: 1px solid tomato;
  background: rgba(0, 0, 0, 0.25);
  margin: 0 0 10px 0;
  cursor: pointer;
  transition: background 0.4s ease;
  will-change: transition;
}
.scroll-indicator-controller > div span {
  color: tomato;
  position: absolute;
  right: calc(100% + 8px);
  white-space: nowrap;
  top: -1px;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 17px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s ease;
  will-change: transition;
  color: #464646;
  font-weight: 600;
}
.scroll-indicator-controller > div span:after {
  content: "-----";
  padding-left: 5px;
  letter-spacing: -2px;
  font-family: arial, sans-serif;
  vertical-align: text-top;
  font-weight: 400;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .scroll-indicator-controller > div:hover span {
    width: auto;
    opacity: 1;
    overflow: visible;
    transform: translateX(0px);
  }
}
@media (hover: none) {
    .scroll-indicator-controller > div span {
      display: none;
    }
}
.scroll-indicator-controller.indi-mobile > div span {
  display: none;
}
.scroll-indicator-controller > div.active {
  background: tomato;
  border-color: rgba(0, 0, 0, 0.25);
}
@supports (-ms-ime-align:auto) {
  .scroll-indicator-controller > div span {
    transition: opacity 0.4s ease;
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Vertical Dot Navigation Plugin </h2>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">       
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <li class="selected"><a href="#">Home</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">A Page</a></li>
          <li><a href="#">Another Page</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div id="site_content">
      <div id="content">
        <div>
            <div class="scroll-indicator" id="section01" data-scroll-indicator-title="First Section"></div>
        </div>
        <div>
            <h1>Welcome to section 1</h1>
        </div>
        <div>
            <div class="scroll-indicator" id="section02" data-scroll-indicator-title="Another Section"></div>
        </div>
        <div>
            <h1>Welcome to section 2</h1>
        </div>
        <div>
            <div class="scroll-indicator" id="section03" data-scroll-indicator-title=""></div>
        </div>
        <div>
           <h1>Welcome to section 3 - Hello world</h1>       
        </div>
<div class="scroll-indicator" id="section04" data-scroll-indicator-title="Hello World"></div>
<div>
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
      </div>
    </div>
  </div>
<footer> <h2>Footer </h2> </footer>
<script>
function dotsThrottle(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function () {
        previous = options.leading === false ? 0 : Date.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function () {
        var now = Date.now();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
}
let dotFixedNavPresent = false;
let dotFixedNavId = '';
let dotFixedNavUp = false;
function easyScrollDots(dotfixedOptions) {
    let scrollIndi = document.querySelectorAll('.scroll-indicator');
    dotfixedOptions.fixedNav === true ? dotFixedNavPresent = true : dotFixedNavPresent;
    dotfixedOptions.fixedNavId === '' ? dotFixedNavId = false : dotFixedNavId = dotfixedOptions.fixedNavId;
    dotfixedOptions.fixedNavUpward === true ? dotFixedNavUp = true : dotFixedNavUp;
    if (scrollIndi.length) {
        const scrollIndiTemplate = '<div class="scroll-indicator-controller"><span></span></div>';
        document.querySelector('body').lastElementChild.insertAdjacentHTML('afterend', scrollIndiTemplate);
        const scrollIndiController = document.querySelector('.scroll-indicator-controller');
        if ((typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1)) { scrollIndiController.classList.add('indi-mobile'); }
        const scrollIndiElems = Array.prototype.slice.call(scrollIndi);
        scrollIndiElems.forEach(function (e, i) {
            const scrollIndiId = e.getAttribute('id');
            const scrollIndiTitle = e.getAttribute('data-scroll-indicator-title');
            let firstActiveClass = '';
            if (i == 0) {
                firstActiveClass = 'active';
            }
            scrollIndiController.lastElementChild.insertAdjacentHTML('afterend', '<div class="' + firstActiveClass + '" data-indi-controller-id="' + scrollIndiId + '" onclick="scrollIndiClicked(\'' + scrollIndiId + '\');"><span>' + scrollIndiTitle + '</span><div></div></div>');
        });
        const scrollIndiControllerDots = scrollIndiController.querySelectorAll('[data-indi-controller-id]');
        var handleIndiScroll = dotsThrottle(function () {
            let indiScrollTopCollection = {};
            scrollIndiElems.forEach(function (e) {
                const scrollIndiIdScroll = e.getAttribute('id');
                const indiScrollTop = e.getBoundingClientRect().top;
                indiScrollTopCollection[scrollIndiIdScroll] = indiScrollTop;
            });
            const indiOffsetValues = Object.keys(indiScrollTopCollection).map(function (itm) { return indiScrollTopCollection[itm]; });
            const indiOffsetMin = function () {
                const indiRemoveMinuses = indiOffsetValues.filter(function (x) { return x > -150; });
                return Math.min.apply(null, indiRemoveMinuses);
            }; 
            Object.keys(indiScrollTopCollection).forEach(function (e) {
                if (indiScrollTopCollection[e] == indiOffsetMin()) {
                    Array.prototype.forEach.call(scrollIndiControllerDots, function (el) {
                        if (el.classList.contains('active')) {
                            el.classList.remove('active');
                        }
                    });
                    scrollIndiController.querySelector('[data-indi-controller-id="' + e + '"]').classList.add('active');
                }
            });
        }, 300);
      window.onscroll = function() {
          handleIndiScroll();
      };
    }
}   
function scrollIndiClicked(indiId) {
    if (window.jQuery) {     
        if (dotFixedNavPresent === true && dotFixedNavId.length) {
            const dotNavHeightElem = document.getElementById(dotFixedNavId);
            const dotNavHeight = dotNavHeightElem.clientHeight;
            const dotDocumentHtml = $('html, body');
            const indiElement = $('#' + indiId);    
            if (dotFixedNavUp === true) {
                dotDocumentHtml.animate({
                    scrollTop: indiElement.offset().top
                }, 700);
                const scrollPos = document.body.getBoundingClientRect().top;
                setTimeout(function () {
                    if (document.body.getBoundingClientRect().top > scrollPos) {
                        dotDocumentHtml.animate({
                            scrollTop: indiElement.offset().top - dotNavHeight
                        }, 400);
                    }
                }, 400);
            }
            else {
                dotDocumentHtml.animate({
                    scrollTop: indiElement.offset().top - dotNavHeight
                }, 700);
            }
        }
        else {
            $('html, body').animate({
                scrollTop: $('#' + indiId).offset().top
            }, 700);
        }    
    }
    else {
        if (dotFixedNavPresent === true && dotFixedNavId.length) {
            const dotNavHeightElem = document.getElementById(dotFixedNavId);
            const dotNavHeight = dotNavHeightElem.clientHeight;
            const indiElement = document.getElementById(indiId);
            if (dotFixedNavUp === true) {
                window.scrollTo({
                    top: indiElement.offsetTop,
                    left: 0,
                    behavior: 'smooth'
                });
                const scrollPos = document.body.getBoundingClientRect().top;
                setTimeout(function () {
                    if (document.body.getBoundingClientRect().top > scrollPos) {
                        window.scrollTo({
                            top: indiElement.offsetTop - dotNavHeight,
                            left: 0,
                            behavior: 'smooth'
                        });
                    }
                }, 400);
            }
            else {
                window.scrollTo({
                    top: indiElement.offsetTop - dotNavHeight,
                    left: 0,
                    behavior: 'smooth'
                });
            }
        }
    }
}
easyScrollDots({
  'fixedNav': false,
  'fixedNavId': '',
  'fixedNavUpward': false
});
</script>
</body>
</html>

Explanation:

In the above example, we created an example of vertical dot navigation plugin.

Output:

Following is the output of this example.

Next TopicjQuery jTippy Tooltip Plugin

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}