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/[email protected]/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.