Simple Smooth X/Y Page Scroll Plugin - jQuery scrollTo

Simple Smooth X/Y Page Scroll Plugin - jQuery scrollTo
File Size: 17.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

scrollTo is a cross-browser and highly customizable jQuery smooth scroll plugin for animated horizontal/vertical page scrolling that allows to smoothly scroll to a specific position of a container or the whole document.

How to use it:

1. Install the scrollTo via package managers.

# NPM
$ npm install jquery.scrollto

# Bower
$ bower install jquery.scrollto

2. Or load the necessary jQuery library and the jQuery scrollTo plugin from CDN.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>

3. The basic JavaScript syntax.

  • element: a specific container or the whole document
  • target: the element/position you want to scroll to
  • duration: the duration of animated scrolling
  • options: an object of possible options
$(element).scrollTo(target,duration,options);

4. All default options to customize the animated page scrolling.

{

  // 'x', 'y', 'xy'
  axis: 'xy',

  // limits the scroll area
  limit: true,

  // If true, subtracts the margin and border of the target element.
  margin: false,

  // Can be a number or an object with left and top
  offset: false,

  // adds a % of the target dimensions
  over:  {left:0.5, top:0.5},

  // If true will scroll one axis and then the other.
  queue: false
  
}

5. Callback functions.

{

  // triggered when the animation ends
  onAfter: function(){},

  // triggered after the first axis scrolls when queueing
  onAfterFirst: function(){}

}

Change log:

2017-10-03


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