v2.0.0 — Stable

jQuery Vertical Scroll

A lightweight, customizable jQuery plugin for creating smooth, full-page vertical scrolling experiences with pagination, themes, and animations.

$ npm install @vineethnkrishnan/jquery.verticalscroll

Get Started GitHub

Scroll or use arrow keys

Why Choose This Plugin

Packed with Features

Everything you need for a smooth scrolling experience, right out of the box.

🖱

Mouse Wheel

Smooth section-by-section scrolling with configurable threshold

⌨

Keyboard Nav

Arrow keys, Page Up/Down, Home & End key support

🖐

Touch & Swipe

Mobile-friendly touch gestures with adjustable sensitivity

◉

Pagination Dots

Animated navigation dots with hover tooltips and click support

🎨

12 Themes

Classic, Neon, Git Graph, Sound Wave, Diamond, Arrow, Pill & more

✨

15 Animations

Pulse, Glow, Bounce, Neon Flicker, Electric Zap, Wave & more

♿

Accessible

Full ARIA labels, focus management, and screen reader support

📱

Responsive

Auto-disables below configurable breakpoint for mobile

Interactive

Theme & Animation Playground

Click buttons to live-switch the theme and pagination animation. Watch the dots on the right update in real-time.

Theme

Pagination Animation

Theme: default • Animation: pulse

$('#page').verticalScroll({
    theme: 'default',
    paginationAnimation: 'pulse'
});

Configuration

All Plugin Options

Every option at a glance. Pass these when initializing or via setOptions().

Option	Type	Default	Description
Selectors
selector	string	'section'	CSS selector for scrollable sections
Navigation
pagination	boolean	true	Show pagination dots
paginationPosition	string	'right'	Position: 'left' or 'right'
paginationOffset	number	20	Offset from edge in pixels
Scrolling
animationDuration	number	800	Scroll animation duration in ms
easing	string	'swing'	jQuery easing function name
scrollThreshold	number	50	Minimum scroll delta to trigger navigation
touchThreshold	number	50	Minimum touch delta to trigger navigation
Input Methods
mouseWheel	boolean	true	Enable mouse wheel navigation
keyboard	boolean	true	Enable keyboard navigation (arrows, Page Up/Down, Home/End)
touch	boolean	true	Enable touch/swipe navigation
Behavior
loop	boolean	false	Loop back to first/last section
autoScroll	boolean	false	Enable automatic scrolling
autoScrollInterval	number	5000	Auto-scroll interval in milliseconds
pauseOnHover	boolean	true	Pause auto-scroll on mouse hover
Accessibility
ariaLabels	boolean	true	Add ARIA labels to sections and navigation
focusOnSection	boolean	true	Focus section element after navigation
Responsive
responsive	boolean	true	Enable responsive behavior
mobileBreakpoint	number	768	Disable plugin below this viewport width
Theming
theme	string	'default'	Theme: 'default', 'light', 'dark', 'minimal'
paginationAnimation	string	'pulse'	Dot animation: 'none', 'pulse', 'glow', 'bounce', 'ripple', 'scale', 'fade-ring', 'rotate', 'morph', 'heartbeat', 'radar'
Callbacks
onInit	function	null	Called after initialization
onDestroy	function	null	Called after destruction
onBeforeScroll	function	null	Called before scrolling (return false to cancel)
onAfterScroll	function	null	Called after scroll animation completes
onSectionChange	function	null	Called when active section changes
onResize	function	null	Called on window resize

Developer API

13 Public Methods

Navigate, query, and control every aspect of the plugin programmatically.

scrollToSection

(index, animate?) → Deferred

Scroll to section by zero-based index

$('#page').verticalScroll('scrollToSection', 2);

scrollToId

(id) → Deferred

Scroll to section by its HTML id

$('#page').verticalScroll('scrollToId', 'contact');

() → Deferred

Navigate to the next section

$('#page').verticalScroll('next');

() → Deferred

Navigate to the previous section

$('#page').verticalScroll('prev');

getCurrentIndex

() → number

Get the current active section index

var i = $('#page').verticalScroll('getCurrentIndex');

getCurrentSection

() → jQuery

Get the current section as a jQuery object

var $s = $('#page').verticalScroll('getCurrentSection');

getSections

() → jQuery

Get all section elements

var $all = $('#page').verticalScroll('getSections');

getSectionCount

() → number

Get total number of sections

var n = $('#page').verticalScroll('getSectionCount');

enable

() → void

Re-enable the plugin after disabling

$('#page').verticalScroll('enable');

disable

() → void

Disable scrolling without destroying

$('#page').verticalScroll('disable');

refresh

() → void

Recalculate section positions after DOM changes

$('#page').verticalScroll('refresh');

setOptions

(options) → void

Update options at runtime (theme, animation, etc.)

$('#page').verticalScroll('setOptions', { theme: 'dark' });

destroy

() → void

Remove plugin, restore original DOM state

$('#page').verticalScroll('destroy');

Hooks

Events & Callbacks

Six lifecycle callbacks plus jQuery event equivalents for full integration control.

onInit

Event: verticalScroll:init

function(index, $section)

Fires after the plugin initializes. Receives the initial section index and element.

onInit: function(index, $section) { console.log('Ready at section', index); }

onDestroy

Event: verticalScroll:destroy

function()

Fires after the plugin is destroyed and DOM is restored.

onDestroy: function() { console.log('Plugin destroyed'); }

onBeforeScroll

Event: verticalScroll:beforescroll

function(targetIndex, $target, currentIndex)

Fires before scroll begins. Return false to cancel the scroll.

onBeforeScroll: function(to, $el, from) { if (to === 3) return false; // block }

onAfterScroll

Event: verticalScroll:afterscroll

function(index, $section, oldIndex)

Fires after the scroll animation completes.

onAfterScroll: function(index, $s, old) { console.log('Scrolled from', old, 'to', index); }

onSectionChange

Event: verticalScroll:sectionchange

function(newIndex, $section, oldIndex)

Fires when the active section changes, even during native scroll tracking.

onSectionChange: function(i, $s, old) { document.title = $s.data('vs-label'); }

onResize

Event: verticalScroll:resize

function(isEnabled)

Fires on window resize. Receives whether the plugin is currently enabled (based on breakpoint).

onResize: function(isEnabled) { console.log('Enabled:', isEnabled); }

Getting Started

Quick Start

Get up and running in four simple steps. Works with npm, CDN, or manual download.

Install

# npm npm install @vineethnkrishnan/jquery.verticalscroll # CDN (jsDelivr) <link rel="stylesheet" href="https://cdn.jsdelivr.net/ npm/@vineethnkrishnan/jquery.verticalscroll/ dist/jquery.verticalScroll.min.css"> <script src="https://cdn.jsdelivr.net/ npm/@vineethnkrishnan/jquery.verticalscroll/ dist/jquery.verticalScroll.min.js"></script>

Include CSS & JS

<link rel="stylesheet" href="jquery.verticalScroll.css">  <script src="jquery.min.js"></script>  <script src="jquery.verticalScroll.js"> </script>

Create HTML Sections

<div id="page"> <section data-vs-label="Home"> <h1>Welcome</h1> </section> <section data-vs-label="About"> <h1>About Us</h1> </section> <section data-vs-label="Contact"> <h1>Contact</h1> </section> </div>

Initialize

// Basic $('#page').verticalScroll(); // With options $('#page').verticalScroll({ theme: 'dark', paginationAnimation: 'glow', loop: true, keyboard: true }); // AMD (RequireJS) define(['jquery', 'jquery.verticalScroll'], function($) { $('#page').verticalScroll(); }); // CommonJS / Webpack var $ = require('jquery'); require('@vineethnkrishnan/jquery.verticalscroll'); $('#page').verticalScroll();

Open Source — MIT License

Ready to Build?

Full documentation, live examples, and community support. Start building beautiful full-page scrolling experiences today.

Full Documentation GitHub npm

MIT License — Free for personal and commercial use

Built by Vineeth Krishnan