滚动

在页面上跳转到不同部分时平滑滚动。

用法

只需将 `uk-scroll` 属性添加到任何包含 URL 片段的页面内链接，即可添加平滑滚动行为。

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

向下滚动

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

粘性元素（例如粘性导航栏）的高度会自动添加为滚动目标的偏移量，因此不会被粘性元素覆盖。

偏移量

要直接链接到页面上的特定部分时定义一个通用偏移量，请添加 `offset` 选项。

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

如果粘性元素已经存在偏移量，则会累加 `offset` 选项。

滚动完成后的回调

要接收滚动完成后的回调，您可以监听触发滚动的链接元素的 `scrolled` 事件。

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

组件选项

任何这些选项都可以应用于组件属性。使用分号分隔多个选项。了解更多

选项	值	默认值	描述
`offset`	数字	`0`	添加到滚动顶部的偏移量。

JavaScript

了解更多关于 JavaScript 组件。

初始化

UIkit.scroll(element, options);

事件

以下事件将在附加此组件的元素上触发

名称	描述
`beforescroll`	在滚动开始之前触发。可以通过在事件上调用 `preventDefault()` 来阻止滚动。
`scrolled`	滚动完成后触发。

方法

以下方法可用于该组件

ScrollTo

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

滚动到给定的元素。

名称	类型	默认值	描述
`el`	节点、选择器	未定义	要滚动到的元素。

向上滚动

文档

滚动