Navigate Your Web Page With a Smooth Scrolling Animation

Deasilsoft / Scroller is to navigate your web page with a smooth scrolling motion. Scroller.js is a small jQuery plugin for creating a smooth, touch-enabled, vertical, full-screen carousel scrollbar (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 scrolling up or down the page on mobile.

full screen scrolling, full page scroll jquery plugin, full screen horizontal scrolling website, full page scroll, one page scrolling effect, full page vertical slider

How to make use of it:

1. Create header navigation that contains anchor links pointing to the web page sections inside the doc.

<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 model of the jQuery scroller plugin on the web page.

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

3. Initialize the plugin on the web page sections you simply created.

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

4. All default choices 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,
});

Tiny Fullscreen Scroller Plugin, Deasilsoft/Scroller Github, one page scroll slider wheel