捲動

當跳轉至頁面上不同區塊時，平滑捲動。

用法

只需將 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 選項。

捲動後的callback

若要在捲動完成時接收 callback，您可以監聽觸發捲動的連結元素上的 scrolled 事件。

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

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

帶有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`	數字	`0`	新增至捲動頂部的偏移量。

JavaScript

了解更多關於JavaScript 元件。

初始化

UIkit.scroll(element, options);

事件

以下事件將會在附加此元件的元素上觸發

名稱	說明
`beforescroll`	在捲動開始之前觸發。可以透過在事件上呼叫 `preventDefault()` 來防止捲動。
`scrolled`	在捲動完成後觸發。

方法

以下方法適用於該元件

ScrollTo

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

捲動到給定的元素。

名稱	類型	預設值	說明
`el`	節點、選擇器	未定義	要捲動到的元素。

向上捲動

文件

捲動