scrollUp - jQuery滚动到顶部插件演示

请往下滚动,再观察右下角。

当网页内容过长,你浏览到底部需要回到顶部时,是不是希望“一键直达”呢?scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就是慢慢的滚动到顶部,而不是硬生生的直接回到顶部,提高了用户体验。

scrollUp 还提供了 3 种主题,在 css 文件夹下。当然你可以自定义。

使用方法

引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>

调用方法

$(function () {
    $.scrollUp();
});

参数

参数 说明
scrollName 绑定 id,默认为 scrollUp
topDistance 滚动条距离顶部多少距离时出现按钮,单位为 px,默认为 300
topSpeed 滚动到顶部的时间,单位为 ms,默认为 300
animation 按钮出现、隐藏的方式,可选 fade(淡入淡出)、slide(滑块)或 none(无)
animationInSpeed 按钮出现的时间
animationOutSpeed 按钮隐藏的时间
scrollText 按钮内的文字,默认为 Scroll to top
activeOverlay 是否显示参考线,值为十六进制颜色值或 false,默认为 false

自定义

你可以通过 CSS 自定义按钮,让按钮更适合你的项目。例如:

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #555;
    color: #fff;
}

dowebok.com 说 明 下 载