平滑滚动

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

用法

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

示例

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

Code

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

偏移

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

示例

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>