Simple Smooth X/Y Page Scroll Plugin - jQuery scrollTo

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.3/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(){}

}

Changelog:

v2.1.3 (2021-02-17)

• Stop using jQuery.isFunction since it's deprecated

2017-10-03

• Update

---

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