Scroll

跳转到页面的不同区块时平滑滚动。

用法

只需为任何包含 URL 片段、指向页面内部的链接添加 uk-scroll 属性，即可启用平滑滚动行为。

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

组件选项

以下任意选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

JavaScript

了解关于 JavaScript 组件 的更多内容。

初始化

UIkit.scroll(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

方法

该组件提供以下方法：

滚动到

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

滚动到给定的元素。

向上滚动