Scroll smoothly when jumping to different sections on a page.


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>
  • Scroll down
  • <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 () {
  • Down with callback
  • <a id="js-scroll-trigger" class="uk-button uk-button-primary" href="#target" uk-scroll>Down with callback</a>
        UIkit.util.on('#js-scroll-trigger', 'scrolled', function () {

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
duration Number 1000 Animation duration in milliseconds.
offset Number 0 Pixel offset added to scroll top.


Learn more about JavaScript components.


UIkit.scroll(element, options);

Scroll up


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.