Navigate Your Web Page With a Smooth Scrolling Animation | Deasilsoft/Scroller

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.

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

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",
      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

See Demo And Download

Official Website(Deasilsoft): Click Here

This superior jQuery/javascript plugin is developed by Deasilsoft. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…