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).

Features:

• 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>

<section class="sec sec1">
  Section Two
</section>

<section class="sec sec2">
  Section Three
</section>

<section class="sec sec3">
  Section Four
</section>

...

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.