jQuery Plugin For Smooth Scrolling Animations - Scrollport.js

Scrollport.js is a robust, fully configurable, yet simple-to-use jQuery plugin that helps you implement smooth page scrolling to target position on same page.

How to use it:

1. Load the latest version of jQuery library and the jQuery scrollport.js script in the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="path/to/scrollport.js"></script>

2. Animate scrolling to a target element.

// target: Either the jQuery object or selector element
// container: default $(window). jQuery object inside which will be scrolling.
$.scrollport( TARGET, CONTAINER, OPTION );

3. Animate scrolling to a specified position of the page.

// top: Number of pixels from the top edge of the container
// left: Number of pixels from the left edge of the container
$.scrollport( top, left, CONTAINER, OPTION );

4. Global options.

// animation mode
// usual, roll, hard or soft.
mode: 'usual',

// Setting the same value for the options interrupt_user and interrupt_scrollport
interrupt: null,

// If during operation the plug the user make a forced scrolling, 
// the movement caused by the plugin will stop.
interrupt_user: true,

// If during the plugin it will initiate a new movement, the former stops. 
// When set to false caused over the existing movement will not be performed.
interrupt_scrollport: true,

// jQuery object inside which will be scrolling.
container: $(window),

// top and left positions
delta: {
  top: 0,
  left: 0
},

// callback functions
on_start: null,
on_stop: null,
on_interrupt: null,
on_finish: null

5. Animation settings.

usual: {
  defaults: {
    easing: 'swing',
    duration: 700
  },

roll: {
  defaults: {
    easing: 'swing',
    speed: 2500,
    max_duration: 700,
    min_duration: 300
},

hard: {
  defaults: {
    easing: 'swing',
    distance: 5,
    duration: 100
},

soft: {
  defaults: {
    easing: null,
    easing_before: 'swing',
    easing_after: 'swing',
    distance: null,
    distance_before: 200,
    distance_after: 200,
    duration: null,
    duration_before: 200,
    duration_after: 400,
    speed: null,
    waiting: 100
},

---

This awesome jQuery plugin is developed by iserdmi. For more Advanced Usages, please check the demo page or visit the official website.