Minimal Full Page Scrolling With Vanilla JavaScript – PageScroll

Preview:

Description:

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.

Features:

• 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>
</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: [
      document.getElementById('home'),
      document.getElementById('about'),
      document.getElementById('contact'),
      document.getElementById('blog'),
      document.getElementById('jobs')
    ]
})

Changelog:

v1.1 (10/19/2020)

• added nav support