Tiny Scroll

A tiny scrolling library for your in-page links.

• Plain old vanilla JS.
• Just 1.7kb gzipped.
• Uses requestAnimationFrame for great performance.
• Does not block user scroll.

Examples

Codepen

• Hello world
• Hello world with options

Alternatively, take a look in /examples.

Installation

npm install tinyscroll

The init function

The Tiny Scroll init function looks for all in page links with a certain class name (by default js-tinyscroll), and replaces the default click behaviour with a smooth scrolling action.

Usage

<a href="#hello-world" class="js-tinyscroll">
  Scroll to Hello World section
</a>

<section id="hello-world">
  <h1>Hello world</h1>
</section>

import * as tinyscroll from 'tinyscroll'
tinyscroll.init()

Options

The init function can optionally take an object as the first argument, that may include the following properties.

className

The class name that Tiny Scroll uses to locate links. Defaults to js-tinyscroll.

tinyscroll.init({ className: 'my-special-class' })

duration

The scroll duration in milliseconds. Defaults to 2000.

tinyscroll.init({ duration: 500 })

ease

The tweening function that is used to ease scroll position. Defaults to easeInOutQuint. Only easeInOutQuint is built in. Using this property will require you to import and use a function from tween-functions.

import ease from 'tween-functions'
tinyscroll.init({ ease: ease.easeOutElastic })

onStart

A callback function triggered when scroll starts.

tinyscroll.init({
  onStart: () => alert('Scroll started')
})

onComplete

A callback function triggered when scroll is complete.

tinyscroll.init({
  onComplete: () => alert('Scroll complete')
})

onCancel

A callback function triggered if scroll is cancelled by user.

tinyscroll.init({
  onCancel: () => alert('Scroll cancelled')
})

The scrollTo function

The scrollTo function is used to smoothly scroll to any element within a page. A target DOM node must be passed into the scrollTo function as the first argument.

Usage

<button type="button">
  Scroll to Hello World section
</button>

<section>
  <h1>Hello world</h1>
</section>

import * as tinyscroll from 'tinyscroll'

const trigger = document.querySelector('button')
const target = document.querySelector('section')

trigger.addEventListener('click', () => {
  tinyscroll.scrollTo(target)
})

Options

The scrollTo function can optionally take an object as the second argument, that may include the following properties.

duration

The scroll duration in milliseconds. Defaults to 2000.

tinyscroll.scrollTo(target, { duration: 500 })

ease

The tweening function that is used to ease scroll position. Defaults to easeInOutQuint. Only easeInOutQuint is built in. Using this property will require you to import and use a function from tween-functions.

import ease from 'tween-functions'
tinyscroll.scrollTo(target, { ease: ease.easeOutElastic })

offset

The number of pixels to offset the scroll to endpoint by. Defaults to 0.

tinyscroll.scrollTo(target, { offset: -200 })

onStart

A callback function triggered when scroll starts.

tinyscroll.scrollTo(target, {
  onStart: () => alert('Scroll started')
})

onComplete

A callback function triggered when scroll is complete.

tinyscroll.scrollTo(target, {
  onComplete: () => alert('Scroll complete')
})

onCancel

A callback function triggered if scroll is cancelled by user.

tinyscroll.scrollTo(target, {
  onCancel: () => alert('Scroll cancelled')
})

Data attributes

It can be useful to override Tiny Scroll's options on a case-by-case basis.

duration

In the following case the duration will be 500ms. The tinyscroll duration option is overridden by the data-duration attribute on the anchor element.

<a
  href="#hello-world"
  class="js-tinyscroll"
  data-duration="500"
>
  Scroll to Hello World section
</a>

<section id="hello-world">
  <h1>Hello world</h1>
</section>

import * as tinyscroll from 'tinyscroll'
tinyscroll.init({ duration: 3000 })

Browser support

Tiny Scroll is packaged with Babel, and makes use of Array.from. If you want Tiny Scroll to work on browsers that don't support this method (e.g. IE11), then you will need to polyfill Array.from before calling tinyscroll.