Easy Page Section Navigation Plugin - jQuery Section Navi

Section Navi is an easy and lightweight jQuery plugin to create smart up/down buttons that enable the user to navigate between content sections within the document.

By default, the navigation buttons auto show and hide when you scroll down or up the webpage. Perfect for one page scrolling website.

How to use it:

1. Add content sections to your webpage.

<section class="section">
  <h2 class="section__title">
    Section One
  </h2>
  <p class="section__body">
    Content One
  </p>
</section>

<section class="section">
  <h2 class="section__title">
    Section Two
  </h2>
  <p class="section__body">
    Content Two
  </p>
</section>

<section class="section">
  <h2 class="section__title">
    Section Three
  </h2>
  <p class="section__body">
    Content Three
  </p>
</section>

...

2. Add jQuery library and the jQuery Section Navi plugin to the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery.sectionnavi.js"></script>

3. Initialize the plugin to activate the navigation buttons.

$('section').sectionnavi({
  buttonUp: '.js-navi-up',
  buttonDown: '.js-navi-down'
});

4. Apply your own CSS styles to the navigation buttons.

.button-navi {
  display: none;
  position: fixed;
  padding: 1em;
  height: 5em;
  width: 5em;
  border: none;
  border-radius: 50%;
  background-color: royalblue;
  cursor: pointer;

  color: white;
}

.button-navi:hover {
  background-color: navy;
}

.button-navi_up {
  bottom: 7em;
  right: 1em;
}

.button-navi_down {
  bottom: 1em;
  right: 1em;
}

5. All default plugin options.

$('section').sectionnavi({
  buttonUp: 'buttonUp',
  buttonDown: 'buttonDown',
  offset: 0, // in pixels
  speed: 200, // in milliseconds
  hideButtons: true, // auto hide buttons
  speedHideBtn: 300,
  ignoreFirst: true,
  useEmpty: false,
});

---

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