UIkit3.x文档

页面滚动

在页面上各部分之间跳转时应用平滑的滚动效果。

用法

只需将uk-scroll属性添加到任何包含页面内部URL片段的链接上，即可实现平滑的页面滚动效果。

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

滚动后回调

要在滚动结束后接收一个回调，可以监听触发滚动的链接元素上的scrolled事件。

<a id="js-scroll-trigger" href="#my-id" uk-scroll></a>
UIkit.util.on('#js-scroll-trigger', 'scrolled', function () {
    alert('Done.');
});
  • Down with callback 
  • <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>

组件选项

可以在组件属性中使用以下选项，用分号隔开多个选项。了解更多

Option Value Default Description
offset Number 0 以像素为单位，添加到“回到顶部”的偏移距离

JavaScript

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

初始化

UIkit.scroll(element, options);
 

Scroll up

事件

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

Name Description
beforescroll 在滚动开始前触发。可以通过对事件调用preventDefault() 来防止滚动。
scrolled 滚动结束后触发。

方法

组件可以使用以下方法：

滚动到

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

滚动到给定元素。

Name Type Default Description
el Node, Selector undefined The element to scroll to.