Scroll
Scroll smoothly when jumping to different sections on a page.
Table of contents
Usage
Simply add the data-uk-scroll attribute to any page-internal link that contains a URL fragment to add the smooth scrolling behavior.
The height of a sticky element, for example the sticky navbar, is automatically added as offset to the scroll target so it is not covered by the sticky element.
Offset
To define a general offset when linking directly to a specific section on a page, add the offset option.
If there is already an offset for a sticky element, the offset option is added up.
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.
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 | Offset added to scroll top. |
JavaScript
Learn more about JavaScript components.
Initialization
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
Scroll to the given element.
| Name | Type | Default | Description |
|---|---|---|---|
el | Node, Selector | undefined | The element to scroll to. |
Scroll up