/topjs

:rocket:一个带动画效果回到顶部的插件，体积小，使用简单，支持自定义:duck:

使用文档说明

前言

top.js是一个体积小、支持自定义、灵活、使用简单、纯原生实现的带动画效果回到顶部的插件；

看看效果

线上效果：http://xiaolongwu.cn/topjsDemo/demo.html

topjs效果图

使用指南

  1. 将top.js引用到项目中；
//像这样
<script src="../dist/top.js"></script>
  1. 实例化topjs
new Top()

//到这里  回到顶部的功能就已经实现了
// 不过所有的属性都是默认的，如果需要自定义，请继续向下看
  1. 自定义的方法
// 实例化时接收一个参数，这个参数为一个对象，
// 传入你想要的值就可以

new Top({s:180,th:500,....}); //回到顶部速度为180，scrollTop为500时，按钮显示
  1. 参数详情
字段名称 定义 默认值
w 按钮的宽度 40px
h 按钮的高度 40px
bt 按钮固定定位的bottom值 40px
rg 按钮固定定位的right值 30px
dImg 按钮默认背景图 http://olv6wm3nj.bkt.clouddn.com/18-3-22/16215533.jpg
hImg 按钮hover时默认背景图 http://olv6wm3nj.bkt.clouddn.com/18-3-22/74337023.jpg
s 页面回到顶部的速度 约等于 70px/15毫秒
th 当页面的scrollTop为多少时，按钮显示 300px

  1. 自定义背景图需要注意的地方

    两种方式：

    • 第一种 直接写一个公网的绝对地址
    • 第二种 可以写相对路径，由于topjs引入到了html文件中，所以必须以html文件为基准
// 例如，和html文件同级有一个img文件夹，即为
new Top({dImg:"img/xxx.png",....});

// 例如，和html文件父级同级有一个img文件，即为
new Top({dImg:"../img/xxx.png",....});

License

MIT