Minimal Scrollspy And Smooth Scroll Plugin - jQuery Click-scroll

The jQuery Click-scroll plugin lets you create a site navigation for your one page scroll webpage that enables the user to scroll through different page sections with smooth scroll and scrollspy functionalities.

How to use it:

1. Create a top site navigation on the webpage. In this case we have 5 content sections within the document as follows:

<nav id="navigation">
  <ul class="menu">
    <li><a href="#section_1">Section 1</a></li>
    <li><a href="#section_2">Section 2</a></li>
    <li><a href="#section_3">Section 3</a></li>
    <li><a href="#section_4">Section 4</a></li>
    <li><a href="#section_5">Section 5</a></li>
  </ul>
</nav>

<div id="section_1"></div>
<div id="section_2"></div>
<div id="section_3"></div>
<div id="section_4"></div>
<div id="section_5"></div>

2. Style the site navigation and make it always stay at the top of the webpage.

nav#navigation {
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  background-color: #fff;
  overflow-y: hidden;
}

ul.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}

ul.menu li {
  outline: none;
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
  color: #000;
}

ul.menu li a {
  padding: 20px;
  text-decoration: none;
}

ul.menu li a:hover {
  color: #fff;
  background-color: red;
}

ul.menu li a:focus { outline: none; }

3. Style the active/inactive menu items as you scroll down the web page.

.active {
  background-color: red;
  color: #fff;
}

.inactive { color: #000; }

4. The plugin depends on the latest version of jQuery JavaScript library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

5. Put the main JavaScript file click-scroll.js after jQuery library. That's it.

<script src="js/click-scroll.js"></script>

6. If you have more than 5 content sections:

var sectionArray = [1, 2, 3, 4, 5, 6, ...];

---

This awesome jQuery plugin is developed by isularifin. For more Advanced Usages, please check the demo page or visit the official website.