swinch is a JavaScript library with vanilla.js page sections that implements a full-page smooth scrolling effect on your single page scrolling website/single page web applications.

smooth scrolling, scroll behavior smooth speed, smooth scroll jquery, smooth scrolling css, scroll behavior smooth not working, smooth scroll javascript

Animate On Scrolling Effect Build With Pure JavaScript

How to make use of it:

1. Link it to the swinch.js file if needed.

<script src="swinch.js"></script>

2. Add full-page content sections to the document.

<main>
  <section id="one"></section>
  <section id="two"></section>
  <section id="three"></section>
  <section id="four"></section>
</main>

3. You can also create the navigation used to switch between these sections.

<header>
  <a href="#one">One</a>
  <a href="#two">Two</a>
  <a href="#three">Three</a>
  <a href="#four">Four</a>
</header>

4. Initialize Swinch.

// swinch.init(sections, options)
swinch.init(null, {
  // options here
});

5. Possible options and callback functions.

/**
 * The duration of the snap, in milliseconds
 *
 * @type {Number}
 */
duration: 500,
/**
 * The offset of the snapping target
 *
 * @type {Number}
 */
offset: 0,
/**
 * Force ScrollControl to snap on a part of each section.
 *
 * null     Snap to the bottom of each section if going up & top if going down.
 * 'top'    Force snap to the top of each section
 * 'bottom' Force snap to the bottom of each section
 * 
 * @type {string|null}
 */
snapTo: null,
/**
 * Called before the snapping starts
 *
 * @param  {Node}   currentSection
 * @param  {Node}   nextSection
 * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
 *
 * @return {void}
 */
onBeforeSnap: function onBeforeSnap(currentSection, nextSection, scrollDirection) {
    //
},
/**
 * Called after the snapping completes
 *
 * @param  {Node}   currentSection
 * @param  {Node}   previousSection
 * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
 *
 * @return {void}
 */
onSnapped: function onSnapped(currentSection, previousSection, scrollDirection) {
    //
}

Smooth Fullpage Scrolling Effect, swinch Plugin/Github

See Demo And Download

Official Website(karlhepler): Click Here

This superior jQuery/javascript plugin is developed by karlhepler. For extra Advanced Usages, please go to the official website.