平滑滚动

通过一个当跳转到页面其他部分时减缓滚动的漂亮效果来增强您的站点。

用法

要当从您页面的一个部分跳转到另一部分时，例如使用回到顶部滚动器，逐渐降低速度，只需将 data-uk-smooth-scroll 属性添加到 <a> 元素，该元素链接到您想要定位的部分的 ID。

示例

在我们的示例中，我们使用标题 平滑滚动 作为目标。

标记

<a href="#my-id" class="uk-button" data-uk-smooth-scroll>...</a>

偏移

当计算滚动位置时，偏移选项会在目标上添加指定的距离。偏移量通过 data 属性传递。该值可以是正数，以便在目标之前停止滚动，也可以是负数，以便在目标之后停止滚动。

示例

此链接 将站点滚动到标题“平滑滚动”，偏移量为 90px。

此链接 将站点滚动到标题“平滑滚动”，偏移量为 -90px。

标记

<a href="#my-id" data-uk-smooth-scroll="{offset: 90}">...</a>

<a href="#my-id" data-uk-smooth-scroll="{offset: -90}">...</a>

JavaScript

您可以使用 JavaScript 手动触发到站点上任何目标元素的平滑滚动动画。

平滑滚动到目标元素

UIkit.Utils.scrollToElement(UIkit.$(element, { /* options */ });

JavaScript 选项