https://github.com/kimulaco/vanilla-smoothie
A minimal smooth scroll library.
https://github.com/kimulaco/vanilla-smoothie
minimal smooth-scrolling vanilla-js
Last synced: 4 months ago
JSON representation
A minimal smooth scroll library.
- Host: GitHub
- URL: https://github.com/kimulaco/vanilla-smoothie
- Owner: kimulaco
- License: mit
- Created: 2018-03-24T12:28:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T05:49:21.000Z (almost 3 years ago)
- Last Synced: 2024-12-27T12:37:16.680Z (4 months ago)
- Topics: minimal, smooth-scrolling, vanilla-js
- Language: TypeScript
- Homepage: https://kimulaco.github.io/vanilla-smoothie/
- Size: 813 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-smoothie.js
[](https://badge.fury.io/js/vanilla-smoothie)
[](https://github.com/kimulaco/vanilla-smoothie/actions)
[](https://opensource.org/licenses/MIT)
- [Feature](#feature)
- [Installation](#installation)
- [Use](#use)
- [Browsers support](#browsers-support)
- [Contributing](#contributing)
- [License](#license)
## Feature
- **Simple** - It an intuitive and simple API, you can write as you like.
- **Minimal** - It doesn't depend on other packages, so it has only the minimum necessary functions.
- **Universal** - It can be used in various environments such as TypeScript and Front-end frameworks, Vanilla.js.
## Installation
### Node.js
You can install using npm or yarn and this method is recommended.
```shell
npm install --save vanilla-smoothie
```
### CDN
You can also use CDN. Suitable for creating small websites and samples.
```html
```
## Use
You can achieve smooth scroll with a simple and intuitive way of writing.
In addition, you can write any way you like, such as Callback or Promise.
```js
const vanillaSmoothie = require('vanilla-smoothie')
// Use callback
vanillaSmoothie.scrollTo('#anchor-01', {
duration: 800
}, () => {
console.log('Scrolled!!')
})
// Use Promise
vanillaSmoothie.scrollTo('#anchor-02', {
duration: 800
}).then(() => {
console.log('Scrolled!!')
})
// Use async/await
(async () => {
await vanillaSmoothie.scrollTo('#anchor-03', {
duration: 800
})
console.log('Scrolled!!')
})()
```
### Example
Sample code to easily implement the anchor link.
```js
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', (event) => {
vanillaSmoothie.scrollTo(event.target.getAttribute('href'), {
duration: 500
})
})
})
```
## Methods
### scrollTo(target[, option, callback])
Scroll to a specified destination.
For `target`, selector or offset is entered. When the selector is specified for the `target`, the target element is focused after scroll.
Refer to [Option](#option) for option parameter.
```js
// Selector
vanillaSmoothie.scrollTo('#id-name')
// Offset Top
vanillaSmoothie.scrollTo(300)
// with option and callback
vanillaSmoothie.scrollTo('#id-name', {
duration: 1000
}, () => {
console.log('Callback')
})
```
### scrollTop([option, callback])
Scroll to the top of the page.
Refer to [Option](#option) for option parameter.
```js
vanillaSmoothie.scrollTop(1000, () => {
console.log('Callback')
})
```
### scrollBottom([duration, callback])
Scroll to the bottom of the page.
Refer to [Option](#option) for option parameter.
```js
vanillaSmoothie.scrollBottom(1000, () => {
console.log('Callback')
})
```
## Option
| Option | Type | Description | default |
| -------- | ------ | ---------------------------------------------------------- | -------- |
| element | object | Target scroll element. | `window` |
| duration | number | Default number of milliseconds to scroll. | `500` |
| adjust | number | Enter a value when you want to adjust the scroll position. | `0` |
| easing | string | Easing name. | `linear` |
### Easing
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
## Browsers support
| [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari |
| --------- | --------- | --------- | --------- | --------- |
| Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions|
## Contributing
Please create an [Issue](https://github.com/kimulaco/vanilla-smoothie/issues) or [Pull requests](https://github.com/kimulaco/vanilla-smoothie/pulls) if you have any improvements!
### Development
Use yarn to download packages and run scripts.
Before creating a Pull requests, execute `yarn test` and check the operation of the library.
```shell
# Install packages
yarn
# TypeScript compile and launch local server to http://localhost:3000
yarn dev
# Build TypeScript and Document
yarn build
# Check TypeScript syntax
yarn lint
# Run E2E test
yarn test
```
Other commands look to `package.json`.
## License
[MIT License](LICENSE).