简单轻量易用的返回顶部插件jQuery.toTop示例
jQuery.toTop插件是一款轻量级的 jQuery 返回顶部插件，压缩后不到 1KB。可定制化，可以设置比如是否自动隐藏、滚动时间、位置等等，这款插件能够解决快速滚回到页面顶部导航区域的问题。
入门指南
使用教程
1、引入文件
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.toTop.min.js"></script>
2、CSS样式
.back-to-top{
display: none;
color: #fff;
background-color: #21B384;
padding: 0 20px;
}
3、HTML
<a class="back-to-top">回到顶部</a>
返回顶部
4、JavaScript初始化
$(function() {
$('.back-to-top').toTop({
autohide: true,
offset: 420,
speed: 500,
position: true,
right: 30,
bottom: 30});
});
参数说明
- autohide：自动隐藏 布尔值 默认为true
- offset：距离顶部多少距离时自动隐藏按钮 整数 默认420
- speed：滚动持续时间 整数 默认500
- position：返回按钮位置，布尔值 默认true，如果设置为 false，则需要手动在 css 中设置“按钮”的位置
- right：右侧距离 整数 默认15
- bottom：底部距离 整数 默认30
the end
