Skip to content
/ topjs Public

🚀一个带动画效果回到顶部的插件,体积小,使用简单,支持自定义🦆

Notifications You must be signed in to change notification settings

LeonWuV/topjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

使用文档说明

前言

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

看看效果

线上效果:https://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 按钮默认背景图 https://olv6wm3nj.bkt.clouddn.com/18-3-22/16215533.jpg
hImg 按钮hover时默认背景图 https://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

About

🚀一个带动画效果回到顶部的插件,体积小,使用简单,支持自定义🦆

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published