Smoothly Scroll Through Sections With Custom Events - jQuery scrollControl.js

scrollControl.js is a lightweight jQuery plugin that smoothly scrolls through a set of viewport-sized page sections with custom triggers and/or events.

Ideal for modern one page scrolling website & web applications.

Supports any JavaScript events and keycodes such as mousewheel, swipe, drag, etc.

How to use it:

1. Create viewport-sized page sections using the following HTML & CSS.

<section id="section1">
  <h1>Section #1</h1>
</section>
<section id="section2">
  <h1>Section #2</h1>
</section>
<section id="section3">
  <h1>Section #3</h1>
</section>
<section id="section4">
  <h1>Section #4</h1>
</section>

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Insert the JavaScript file scrollControl.js after jQuery.

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

3. Initialize the plugin.

var scrollControl = ScrollControl([
    '#section1',
    '#section2',
    '#section3',
    '#section4'
]);

4. Smoothly scroll through the page sections with up/down keys.

$(document).keydown(function(e) {
  if (e.which==38) {
    e.preventDefault();
    scrollControl.prevSection();
  } else if (e.which==40) {
    e.preventDefault();
    scrollControl.nextSection();
  } else if (e.which==32) {
    e.preventDefault();
    scrollControl.nextSection();
  }
});

5. Or make anchor links smoothly scroll to a specified page sections.

$(document).on('click', 'a.smooth', function(event){
  event.preventDefault();
  smoothScrollTo($.attr(this, 'href'));
});

---

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