本文へスキップ

ドキュメント

スクロール

ページ内の異なるセクションにジャンプする際、スムーズにスクロールします。

使用方法

スムーズスクロール動作を追加するには、URLフラグメントを含むページ内のリンクにuk-scroll属性を追加するだけです。

<a href="#my-id" uk-scroll></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>

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションをセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
offset 数値 0 スクロールトップに追加されるオフセット。

JavaScript

JavaScriptコンポーネントの詳細については、こちらをご覧ください。

初期化

UIkit.scroll(element, options);

イベント

このコンポーネントがアタッチされた要素でトリガーされるイベントを次に示します。

名前 説明
beforescroll スクロール開始前に発生します。イベントでpreventDefault()を呼び出すことで、スクロールを阻止できます。
scrolled スクロール完了後に発生します。

メソッド

このコンポーネントで使用できるメソッドを次に示します。

ScrollTo

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

指定した要素にスクロールします。

名前 型 デフォルト 説明
el ノード、セレクタ 未定義 スクロール先の要素。

スクロールアップ