Minimal Full Page Scrolling With Vanilla JavaScript – PageScroll

Category: Animation , Javascript | October 18, 2020
Author: beatmode-the-developer
Views Total: 713 views
Official Page: Go to website
Last Update: October 18, 2020
License: MIT


Minimal Full Page Scrolling With Vanilla JavaScript – PageScroll


A super tiny and simple-to-use JavaScript full page scroll library for creating one-page scrolling websites like presentations, page sliders, landing pages, single-page apps, etc.


  • Slide between sections with mouse wheel.
  • Navigate to prev or next section by pressing the navigation arrows.

How to use it:

1. Place the stylesheet pagescroll.css and JavaScript pagescroll.js in the HTML page.

<link rel="stylesheet" href="pagescroll.css" />
<script src="pagescroll.js"></script>

2. Add sectioned pages to a container element named 'pagescroll'.

<div id="pagescroll">
  <div class="section">Slide 1</div>
  <div class="section">Slide 2</div>
  <div class="section">Slide 3</div>
  <div class="section">Slide 4</div>
  <div class="section">Slide 5</div>

3. Initialize the PageScroll on document ready. That’s it.

new PageScroll('#pagescroll')

4. Customize the duration of the animation. Defaults to 300ms.

new PageScroll('#pagescroll', {
    animDuration: 500

5. Apply an easing function to the animation. Defaults to ‘linear’.

new PageScroll('#pagescroll', {
    easing: 'cubic-bezier(...)'

6. Specify the background color of the up/down arrows.

new PageScroll('#pagescroll', {
    controlColor: '#ccc'

7. Define an array of selectors that allows the user to switch between sections by clicking anchor links. Great for header navigation.

new PageScroll('#pagescroll', {
    nav: [


v1.1 (10/19/2020)

  • added nav support

You Might Be Interested In:

Leave a Reply