页面滚动
在页面上各部分之间跳转时应用平滑的滚动效果。
用法
只需将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);
事件
附加此组件的元素将触发以下事件：
| Name | Description |
|---|---|
beforescroll |
在滚动开始前触发。可以通过对事件调用preventDefault() 来防止滚动。 |
scrolled |
滚动结束后触发。 |
方法
组件可以使用以下方法：
滚动到
UIkit.scroll(element).scrollTo(el);
滚动到给定元素。
| Name | Type | Default | Description |
|---|---|---|---|
el |
Node, Selector | undefined | The element to scroll to. |