滚动

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

用法

只需将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`	节点，选择器	未定义	要滚动到的元素。

向上滚动

文档

滚动