Scroll

Scroll smoothly when jumping to different sections on a page.

Usage

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

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

<a class="uk-button uk-button-primary" href="#target" uk-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" uk-scroll></a>

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

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

<script>
    UIkit.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

UIkit.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

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

Scroll to the given element.

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