jQuery.toTop是一款轻量级可自由定制的平滑滚动的jQuery返回顶部插件。该返回顶部插件大小只有1kb,返回顶部按钮的样式可以通过CSS来完全自定义。返回顶部时的动画效果平滑顺畅,而且使用非常简单。它的特点有:
- 使用超级简单
- 轻量级,压缩版小于1kb
- 可通过选项自定义插件
- 可以使用任何HTML元素来制作返回顶部元素,可通过CSS来自定义它的样式
- 100%没有BUG
使用方法
在页面中引入jQuery和jquery.toTop.min.js文件。
<script src="jquery.min.js"></script> <script src="js/jquery.toTop.min.js"></script>
HTML结构
可以使用任何HTML元素来制作返回顶部的容器。
<a class="to-top">Top ↑</a>
初始化插件
在页面加载完毕之后通过下面的方法来初始化该返回顶部插件。
$('.to-top').toTop();
配置参数
$('.to-top').toTop({ //options with default values autohide: true, offset: 420, speed: 500, right: 15, bottom: 30 });
名称 | 参数值 | 描述 |
autohide | boolean | 返回顶部按钮是否自动隐藏。可以设置true 或false 。默认为true |
offset | Integer (px) | 页面滚动到距离顶部多少距离时隐藏返回顶部按钮。默认值为420 |
speed | Integer (ms) | 滚动和渐隐的持续时间,默认值为500 |
right | Integer (px) | 返回顶部按钮距离屏幕右边的距离,默认值为15 |
bottom | Integer (px) | 返回顶部按钮距离屏幕顶部的距离,默认值为30 |