Scroll

Scroll smoothly when jumping to different sections on a page.

Usage

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

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

Scroll down

Something's not working? Feel free to report an issue or edit this snippet .

<a class="uk-btn uk-btn-primary" href="#target" uk-scroll>Scroll down</a>

Something's not working? Feel free to report an issue or edit this snippet .

<a className="uk-btn uk-btn-primary" href="#target" uk-scroll>Scroll down</a>

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.

<a href="#my-id" data-uk-scroll="offset: 100"></a>

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.

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

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

Preview
HTML

Down with callback

Something's not working? Feel free to report an issue or edit this snippet .

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

<script>
  document.addEventListener("uikit:init", () => {
    UIkit.util.on("#js-scroll-trigger", "scrolled", function () {
      UIkit.modal.dialog('<p class="uk-modal-body">Done</p>');
    });
  });
</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`	Offset added to scroll top.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.scroll(element, options);

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.

Scroll up

On This Page
Usage
Offset
Callback after scroll
Component options
JavaScript