简单轻量易用的返回顶部插件jQuery.toTop示例

简单轻量易用的返回顶部插件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