sweet-scroll.js
Modern and the sweet smooth scroll library.
View Demo
FEATURES
- Dependecy-free!!
- ECMAScript 2015(ES6) frendly
- Use
requestAnimationFrame
API (IE9 works in setTimeout
instead) - Supports vertical and horizontal scroll
- Supports dynamic trigger (event delegation)
- Supports container for the scroll
USAGE
1. Install
via NPM
$ npm install sweet-scroll
use
import SweetScroll from "sweet-scroll"
via MANUAL
- Download the sweet-scroll.min.js
- Load it in the script tag.
<script src="sweet-scroll.min.js"></script>
2. Setup of HTML
<a href="#intro" data-scroll>Go to Introduction</a>
...
<div id="intro">Introduction</div>
3. Initialize SweetScroll
const sweetScroll = new SweetScroll({});
OPTIONS
The following options are applied by default. It can be customized as needed.
{
trigger: "[data-scroll]",
header: "[data-scroll-header]",
duration: 1000,
delay: 0,
easing: "easeOutQuint",
offset: 0,
verticalScroll: true,
horizontalScroll: false,
stopScroll: true,
beforeScroll: null,
afterScroll: null,
cancelScroll: null
}
Easings
Supports the following easing.
- Normal
- 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
- Elastic
easeInElastic
easeOutElastic
easeInOutElastic
- Back
easeInBack
easeOutBack
easeInOutBack
- Bounce
easeInBounce
easeOutBounce
easeInOutBounce
Live demo
Specifies the container
In the following example we have specified in the container for scrolling the #container
.
<div id="container">
<a href="#heading2" data-scroll>Go to Heading2</a>
...
<h2 id="heading2">Heading2</h2>
</div>
const sweetScroll = new SweetScroll({}, "#container");
const sweetScroll = new SweetScroll({}, document.getElementById("container"));
Add the data-scroll-header
attribute in order to offset the height of the fixed header.
<header data-scroll-header></header>
Specify the CSS Selector in header
option instead of the data-scroll-header
attribute.
const sweetScroll = new SweetScroll({
header: "#header"
});
Override of options for each element
You can override the default options by passing the option in JSON
format to the data-scroll-options
.
<a href="#target" data-scroll data-scroll-options='{"easing": "easeOutBounce"}'>Go to Target</a>
API
new SweetScroll(options = {}, container = "body, html")
to(distance, options = {})
toTop(distance, options = {})
toLeft(distance, options = {})
destroy()
distance
to can specify the CSS Selector or scroll position.
Example:
const SweetScroll = new SweetScroll();
sweetScroll.to("#footer");
sweetScroll.to({top: 1000, left: 20});
sweetScroll.to([0, 1000]);
sweetScroll.to(500);
sweetScroll.to("top: 500, left: 100");
sweetScroll.to("+=500")
sweetScroll.to("-=200")
BROWSER SUPPORT
Works in IE9+
, and all modern browsers.
LICENCE
Released under the MIT Licence
AUTHOR
tsuyoshiwada
DEVELOPMENT
Initialization of the project.
$ cd /your/project/dir
$ git clone https://github.com/tsuyoshiwada/sweet-scroll.git
Install some dependencies.
$ npm install
Start the development.
You I can access the http://localhost:3000/
.
$ npm start
Run lint and testing.
$ npm test
Generates build file.
$ npm run build