Skip to content

kimulaco/vanilla-smoothie

Repository files navigation

vanilla-smoothie.js

npm version Build Status License MIT

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

IE / Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS 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.