平滑滚动

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

用法

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

示例

使用了标题的 ID 作为 平滑滚动 的目标。

到顶部 到顶部 到底部

代码

<span data-smooth-scroll>...</span>
<a data-smooth-scroll href="#h1">...</a>

偏移

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

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

示例

此链接 滚动到模板锚点上方的 90px 处。

此链接 滚动到模板锚点下方的 90px 处。

代码

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