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.
Alternatively, take a look in /examples
.
npm install tinyscroll
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.
<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()
The init
function can optionally take an object as the first argument, that
may include the following properties.
The class name that Tiny Scroll uses to locate links.
Defaults to js-tinyscroll
.
tinyscroll.init({ className: 'my-special-class' })
The scroll duration in milliseconds. Defaults to 2000.
tinyscroll.init({ duration: 500 })
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 })
A callback function triggered when scroll starts.
tinyscroll.init({
onStart: () => alert('Scroll started')
})
A callback function triggered when scroll is complete.
tinyscroll.init({
onComplete: () => alert('Scroll complete')
})
A callback function triggered if scroll is cancelled by user.
tinyscroll.init({
onCancel: () => alert('Scroll cancelled')
})
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.
<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)
})
The scrollTo
function can optionally take an object as the second argument, that may include the following properties.
The scroll duration in milliseconds. Defaults to 2000.
tinyscroll.scrollTo(target, { duration: 500 })
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 })
The number of pixels to offset the scroll to endpoint by. Defaults to 0.
tinyscroll.scrollTo(target, { offset: -200 })
A callback function triggered when scroll starts.
tinyscroll.scrollTo(target, {
onStart: () => alert('Scroll started')
})
A callback function triggered when scroll is complete.
tinyscroll.scrollTo(target, {
onComplete: () => alert('Scroll complete')
})
A callback function triggered if scroll is cancelled by user.
tinyscroll.scrollTo(target, {
onCancel: () => alert('Scroll cancelled')
})
It can be useful to override Tiny Scroll's options on a case-by-case basis.
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 })
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
.