vanilla-smoothie.js

Feature
Installation
Use
Browsers support
Contributing
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.

npm install --save vanilla-smoothie

CDN

You can also use CDN. Suitable for creating small websites and samples.

<script src="https://cdn.jsdelivr.net/npm/vanilla-smoothie@2.2.5/dist/vanilla-smoothie.min.js"></script>

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.

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.

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 for option parameter.

// 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 for option parameter.

vanillaSmoothie.scrollTop(1000, () => {
  console.log('Callback')
})

scrollBottom([duration, callback])

Scroll to the bottom of the page.

Refer to Option for option parameter.

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

Edge	Firefox	Chrome	Safari	iOS Safari
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Contributing

Please create an Issue or Pull requests 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.

# 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.