Scroll To

Smoothly scrolls to an element with a specified easing. Can also be bound globally so that all hash links are smoothed out.

<button ob-scrollto="$target: #foo, offset: -15">
	Scroll to #foo
</button>

<a href="#bar">Link to #bar</a>

<p>Vivamus eu volutpat enim. Proin …</p>
<p>Integer ligula eros, mattis ac …</p>
<h1 id="foo">Foo</h1>
<p>Sed eget imperdiet nulla. Vestibulum …</p>
<h1 id="bar">Bar</h1>
<p>Nam sed dignissim quam. Sed porta orci …</p>
<p>Quisque non nibh ullamcorper, rhoncus …</p>

<button ob-scrollto="offset: 0">
	Back to top
</button>

import { Watcher } from 'oblik'
import { ScrollTo } from 'oblik/components/scroll-to'

let w = new Watcher(document.body, {
	components: {
		scrollto: ScrollTo
	}
})

w.init()

// Additionally, adds smooth scrolling to hash links.
document.addEventListener('click', ScrollTo.clickHandler())

# Options

# duration

Length of the animation.

Default: 1000

# easing

An easing function.

Default: easeOutQuint

# target

Element that should be scrolled into view.

Default: undefined

# offset

If target is specified, offset will simply be added to the target element's position. Otherwise, it will scroll to offset pixels past the document top.

Default: 0

# interruptible

Whether the scroll animation can be interrupted by user input, such as mouse scroll or touch.

Default: true

If you want to have smooth scrolling for all hash links, you have to use the static clickHandler() method and add the resulting function as a click listener:

import { ScrollTo } from 'oblik/components/scroll-to'

document.addEventListener('click', ScrollTo.clickHandler())
← Parallax Scrolled →