ECMAScript2015+ & TypeScript Friendly, dependency-free smooth scroll library.
🍭 See Demo
Features
- Dependecy-free!!
- ECMAScript2015+ & TypeScript friendly
- Use
requestAnimationFrame
API - Supports vertical and horizontal scroll
- Supports dynamic trigger (event delegation)
- Supports container for the scroll
- Supports many easing types
- Supports server-side rendering (Can load without putting out errors.)
Migration Guide
See the Migration Guide
Table of Contents
- Usage
- Options
- Easings
- Customizing Tips
- API
- new SweetScroll(options?: PartialOptions, container?: string | Element)
- SweetScroll.create(options?: PartialOptions, container?: string | Element)
- to(distance: any, options?: PartialOptions)
- toTop(distance: any, options?: PartialOptions)
- toLeft(distance: any, options?: PartialOptions)
- toElement($el: Element, options?: PartialOptions)
- update(options: PartialOptions)
- stop(gotoEnd: boolean = true)
- destroy()
- Callbacks
- Browser Support
- CHANGELOG
- Contibute
- License
Usage
1. Install
via NPM
$ npm install sweet-scroll
use
;
via MANUAL
- Download the sweet-scroll.min.js
- Load it in the script tag.
via CDN (UNPKG)
2. Setup of HTML
Go to Introduction...Introduction
3. Initialize SweetScroll
You need to initialize an instance after DOMContentLoaded
.
document.addEventListener 'DOMContentLoaded',, false,;
Options
The following options are applied by default. It can be customized as needed.
Easings
Supports the following easing.
Built-in (22)
- Normal
linear
- Quad
easeInQuad
easeOutQuad
easeInOutQuad
- Cubic
easeInCubic
easeOutCubic
easeInOutCubic
- Quart
easeInQuart
easeOutQuart
easeInOutQuart
- Quint
easeInQuint
easeOutQuint
(default)easeInOutQuint
- Sine
easeInSine
easeOutSine
easeInOutSine
- Expo
easeInExpo
easeOutExpo
easeInOutExpo
- Circ
easeInCirc
easeOutCirc
easeInOutCirc
Advanced (9)
Easing functions that are not built in can pass functions directly.
;
Elastic
easeInElastic
;
easeOutElastic
;
easeInOutElastic
;
Back
easeInBack
;
easeOutBack
;
easeInOutBack
? c / 2 * t * t * s *= 1525 + 1 * t - s + b : c / 2 * t -= 2 * t * s *= 1525 + 1 * t + s + 2 + b;
Bounce
easeOutBounce
;
easeInBounce
; ;
easeInOutBounce
; ; ? easeInBouncex, t * 2, 0, c, d * 05 + b : easeOutBouncex, t * 2 - d, 0, c, d * 05 + c * 05 + b;
Customizing Tips
Specifying container elements
In the following example we have specified in the container for scrolling the #container
.
Go to Heading2 ... Heading2
// Specified in the CSS Selector; // Specified in the Element;
Specify fixed header
Add the data-scroll-header
attribute in order to offset the height of the fixed header.
Specify the CSS Selector in header
option instead of the data-scroll-header
attribute.
;
Override of options for each element
You can override the default options by passing the option in JSON
format to the data-scroll-options
.
Go to Target
If you want to use in non anchor element
Will use the data-scroll attribute instead of href.
Scroll under 500px
Scrolling animation in another page
The following, Introduce one of the mounting method.
document.addEventListener 'DOMContentLoaded',, false,;
You can also achieve the same thing in other ways by using the provided API.
API
new SweetScroll(options?: PartialOptions, container?: string | Element | Window)
Will generate a SweetScroll instance.
Example:
;
SweetScroll.create(options?: PartialOptions, container?: string | Element | Window)
Will generate a SweetScroll instance. (factory method)
Example:
;
to(distance: any, options?: PartialOptions)
Scroll animation to the specified distance
.
distance
to can specify the CSS Selector or scroll position.
Example:
; // CSS Selector of target elementscroller.to'#footer'; // Objectscroller.to; // Array (top:0, left:1000)scroller.to; // Number (Priority to vertical scroll position. by default.)scroller.to500; // String (Relative position)scroller.to'+=500';scroller.to'-=200';
toTop(distance: any, options?: PartialOptions)
Vertical scroll animation to the specified distance
.
Example:
scroller.toTop0;
toLeft(distance: any, options?: PartialOptions)
Horizontal scroll animation to the specified distance
.
Example:
scroller.toLeft1500;
toElement($el: Element, options?: PartialOptions)
Scroll animation to the specified Element
.
Example:
scroller.toElementdocument.getElementById'content';
update(options: PartialOptions)
Will update the SweetScroll instance. Primarily used in the case of option update.
Example:
scroller.update;
stop(gotoEnd: boolean = true)
gotoEnd: {Boolean}
Will stop the current scroll animation.
Example:
scroller.stoptrue;
destroy()
Will destroy the SweetScroll instance. Disable of the method and event handler.
Example:
scroller.destroy;
Callbacks
In before
and after
, you will pass the coordinates and the triggering element in the argument.
In addition, you can stop the scrolling by return a before
in false
.
Example:
;
Extends Class:
The following is a pattern to override a method in the inheritance destination class.
;
Browser Support
Works in IE10+
, and all modern browsers.
Scrolling with IE9
It is necessary to use polyfill or ponyfill of requestAnimationFrame
.
CHANGELOG
See the CHANGELOG.md
Contibute
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request 💪
Bugs, feature requests and comments are more than welcome in the issues.
Development
We will develop using the following npm scripts.
yarn start
Launch the local server and let the demo run. Opening http://localhost:3000 in your browser.
yarn build
Compile TypeScript and create type definitions.
yarn test
Run unit testing with Jest.