Tiny Fullscreen Scroller Plugin - jQuery Scroller.js

Scroller.js is a tiny jQuery plugin for building a smooth, touch-enabled, vertical, and fullscreen page carousel slider (also called a one page scrolling website).

The user can navigate through different sections of the page by scrolling up and down with the mouse or by swiping Up or Down the page on mobile.

It also comes with a header navbar that enables you to switch between page sections and highlights the active menu item based on which section you're viewing on.

How to use it:

1. Create a header navigation that contains anchor links pointing to the page sections within the document.

<header>
  <nav>
    <ul>
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#products">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<article id="home">
  Homepage
</article>
<article id="products">
  Products
</article>
<article id="about">
  About
</article>
<article id="contact">
  Contact
</article>

2. Include the minified version of the jQuery scroller plugin on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/dist/scroller.min.js"></script>

3. Initialize the plugin on the page sections you just created. That's it.

window.Deasilsoft.Scroller(["#home", "#products", "#about", "#contact"]);

4. All default options to customize the plugin.

window.Deasilsoft.Scroller(["#home", "#products", "#about", "#contact"],{
  Navigation: {
    // active class
    Class: {
      Active: "active"
    },
    // default selectors
    Selector: {
      ActiveParentLink: true,
      Active: "body > header .nav-item.active",
      Link: "body > header .nav-link[href^='{{link}}']"
    }
  },
  // resize timeout
  ResizeTimeout: 250,
  // scroll timeout
  ScrollTimeout: 100,
  // touch threshold
  TouchThreshold: 0.66,
  // start the document at section 1
  LoadLink: 0,
});

---

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