Single Page Scroll With jQuery - pageScroll.js

File Size: 17.2 MB
Views Total: 1515
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Single Page Scroll With jQuery - pageScroll.js

pageScroll.js is a jQuery plugin that takes a group of page sections and converts them into a vertical one page scrolling website (also called page slider).


  • Scrolls through sections with mouse wheel.
  • Automatically changes side nav's color based on contrast.
  • Navigates to a specific section by clicking circle stops.

See Also:

10 Best Mobile-friendly One Page Scroll Plugins

How to use it:

1. Add fullscreen sections to the page.

<section class="sec sec0">
  Section One

<section class="sec sec1">
  Section Two

<section class="sec sec2">
  Section Three

<section class="sec sec3">
  Section Four


2. Apply your own CSS styles to the page sections.

.sec0 {
  background-color: green !important;

.sec1 {
  background-color: aqua !important;  

.sec2 {
  background-color: red !important;

.sec3 {
  background-color: black !important;

3. Load the pageScroll.js JavaScript library after jQuery and the plugin will do the rest.

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

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