返回介绍

平滑滚动

发布于 2019-05-26 16:28:24 字数 910 浏览 1105 评论 0 收藏 0

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

用法

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

<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的地方停下来。
<a href="#my-id" data-uk-smooth-scroll="{offset: 90}">...</a>
<a href="#my-id" data-uk-smooth-scroll="{offset: -90}">...</a>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文