页面滚动／Scroll

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

用法

只需将 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>

组件选项

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

选项 可用值 默认值 描述
offset Number 0 以像素为单位，添加到“回到顶部”的偏移距离

JavaScript

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

初始化

UIkit.scroll(element, options);

Scroll up

事件

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

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

方法

组件可以使用以下方法：

ScrollTo／滚动到

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

滚动到给定元素。

Name 类型 默认值 描述
el Node, Selector undefined 滚动到的元素。

上一篇： Progress

下一篇： Scrollspy

scroll.md

# 页面滚动／Scroll

<p class="uk-text-lead">在页面上各部分之间跳转时应用平滑的滚动效果。</p>

## Usage-用法

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

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

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

***

## Callback after scroll-滚动后回调

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

```html
<a id="js-scroll-trigger" href="#my-id" uk-scroll></a>
```

```js
UIkit.util.on('#js-scroll-trigger', 'scrolled', function () {
    alert('Done.');
});
```

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

***

## Component options-组件选项

可以在组件属性中使用以下选项，用分号隔开多个选项。 [了解更多](javascript.md#component-configuration)

| 选项     | 可用值  | 默认值 | 描述                         |
|:-----------|:-------|:--------|:------------------------------------|
| `offset`   | Number | `0`     | 以像素为单位，添加到“回到顶部”的偏移距离   |

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.scroll(element, options);
```

<div style="height: 2000px;"></div>

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

### 事件

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

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


### 方法

组件可以使用以下方法：

#### ScrollTo／滚动到

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

滚动到给定元素。

| Name | 类型             | 默认值       | 描述      |
|:-----|:---------------|:----------|:--------|
| `el` | Node, Selector | undefined | 滚动到的元素。 |