Cross-platform Smooth One Page Scrolling With Pure JavaScript – fullPageScrollPureJS

Preview:

Description:

A pure JavaScript / CSS implementation of cross-platform smooth one page scrolling effect with no 3rd dependencies.

Features:

• Interact with mouse scroll, touch swipe and arrow keys.
• Smooth scroll between sections.
• Side navigation.
• Supports hashtag change event.

How to use it:

Load both stylesheet full-page-scroll.css and JavaScript full-page-scroll.js into your html file.

<link rel="stylesheet" href="full-page-scroll.css">
<script src="full-page-scroll.js"></script>

Add sectioned content to your one page scrolling website.

<div id="main" class="scroll-container">
  <section class="section1">
    <div>
      <span>Section 1</span>          
    </div>
  </section>
  <section class="section2">
    <div>
      <span>Section 2</span>  
    </div>
  </section>
  <section class="section3">
    <div>
      <span>Section 3</span>      
    </div>
  </section>
  <section class="section4">
    <div>
      <span>Section 4</span>      
    </div>
  </section>
  <section class="section5">
    <div>
      <span>Section 5</span>       
    </div>
  </section>
</div>

Create a new instance of fullScroll and done.

new fullScroll({
    // options here
});

Options and defaults.

new fullScroll({
    // parent container
    container : 'main',
    // content section
    sections : 'section',
    // animation speed
    animateTime : 0.7,
    // easing for animation
    animateFunction : 'ease',
    // current position
    currentPosition: 0,
    // display dots navigation
    displayDots: true,
    // where to place the dots navigation
    dotsPosition: 'left'
});

Changelog:

2019/05/01

• fixing dots classes