Scroll

Ready Added in 2.0.0

Scroll smoothly when jumping to different sections on a page.

Usage

Simply add the gls-scroll attribute to any page-internal link that contains a URL fragment to add the smooth scrolling behavior.

<a href="#my-id" gls-scroll></a>

Scroll down

<a class="gls-button gls-button-primary" href="#target" gls-scroll>Scroll down</a>

Callback after scroll

To receive a callback when scrolling has completed, you can listen to the scrolled event on the link element that triggered the scrolling.

<a id="js-scroll-trigger" href="#my-id" gls-scroll></a>

Gloss.util.on('#js-scroll-trigger', 'scrolled', function () {
    alert('Done.');
});

Down with callback

<a id="js-scroll-trigger" class="gls-button gls-button-primary" href="#target" gls-scroll>Down with callback</a>

<script>
    Gloss.util.on('#js-scroll-trigger', 'scrolled', function () {
        alert('Done.');
    });
</script>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
`offset`	Number	`0`	Pixel offset added to scroll top.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.scroll(element, options);

Scroll up

Events

The following events will be triggered on elements with this component attached:

Name	Description
`beforescroll`	Fires before scroll begins. Can prevent scrolling by calling `preventDefault()` on the event.
`scrolled`	Fires after scrolling is finished.

Methods

The following methods are available for the component:

ScrollTo

Gloss.scroll(element).scrollTo(el);

Scroll to the given element.

Name	Type	Default	Description
`el`	Node, Selector	undefined	The element to scroll to.