Do not use this!

Smooth scrolling is an important UI pattern. There are countless solutions for this, but I found that all of them lack some features.

The code in this repository is not meant to be used on its own. I intend to improve existing solutions instead. This is just my personal scratchpad.

Features

| | this | GabrielDelepine | firstandthird | cferdinandi | narikei | bloodyowl | iamdustan | kswedberg | mathiasbynens | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | no dependencies | yes | yes | yes | yes | yes | ~ | yes | jquery | jquery | | packaging | umd | auto exec | es6 | umd | global | es6 | umd | umd | global | | file size | 3k | 3k | 2k | 18k | 2k | 1k | 9k | 10k | 2k | | can be used from javascript | yes | no | ~ | yes | yes | yes | yes | yes | yes | | works on jump-links with minimal config (0-5 lines) | yes | yes | yes | yes | no | no | ? | yes | yes | | fixed header support | yes | ~ | no | yes | no | ~ | ? | ~ | no | | keeps history intact | yes | yes | no | no | no | ~ | ? | no | yes | | uses requestAnimationFrame | yes | no | yes | no | no | yes | yes | ~ | ~ | | horizontal scrolling support | yes | no | no | no | yes | yes | ? | yes | no | | implements standard | no | no | no | no | no | no | yes | no | no | | project is active | ~ | ~ | yes | yes | no | no | yes | yes | no | | supports containers other than full page | no | no | no | no | no | no | ? | yes | no | | change direction mid-scroll | ? | ? | ? | ? | ? | ? | ? | ? | ? |

Usage

init(options)

Register click handlers for all elements matching options.selector. Options are:

• selector (string) - defaults to [href^="#"]
• headerSelector (string) - defaults to [data-scroll-header]
• duration (number) - defaults to 400
• easing (function) - defaults to cubicInOut()

If the file is included directly (i.e. not via commonjs or amd module systems) this function is called automatically.

smoothScrollToSelector(selector, options)

Scroll to the first element matching selector.

smoothScrollTo(endX, endY, options)

Low-level function that scrolls to the given position. The header is ignored.

animate(apply, duration)

Low-level function that calls apply(progress) on each animation frame. progress is a number between 0 and 1.