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 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!