平滑滚动

用一个漂亮的缓慢滚动效果来增强网站页面内各部分之间跳转时的效果。

用法

为了能在网页中的一部分跳转到另一部分时,渐渐降低跳转的速度,例如,一个回到顶部的按钮,只需要添加 data-uk-smooth-scroll 属性到一个链接到目标位置的 <a> 元素中即可。

示例

在我们的例子中,使用了标题的ID作为 平滑滚动 的目标。

去顶部~ 去底部~

Code

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

偏移

在精确计算滚动位置时,通过偏移选项来添加相对于目标的指定距离。偏移量通过data属性传递。它的数值为正时,在到达目标位置之前停止滚动;数值为负时,在超过目标位置后停止滚动。

Data 属性 描述
data-uk-smooth-scroll="{offset: 90}" 添加一个偏移量,在滚动到目标还有90PX的位置停下来。
data-uk-smooth-scroll="{offset: -90}" 添加一个偏移量,在滚动到超过目标位置90PX的地方停下来。

示例

This link scrolls the site to the headline "Smooth scroll" with an offset of 90px.

This link scrolls the site to the headline "Smooth scroll" with an offset of -90px.

Code

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

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