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 →