Scroll smoothly when jumping to different sections on a page.
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.
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.
To receive a callback when scrolling has completed, you can listen to the scrolled event on the link element that triggered the scrolling.
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. |
Learn more about JavaScript components.
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. |
The following methods are available for the component:
Scroll to the given element.
| Name | Type | Default | Description |
|---|---|---|---|
el | Node, Selector | undefined | The element to scroll to. |
Scroll up