Skip to content

Commit d936bc8

Browse files
Sumsung524Sumsung524
committed
first commit v1.0.0
1 parent 8971b4a commit d936bc8

File tree

5 files changed

+225
-2
lines changed

5 files changed

+225
-2
lines changed

‎README.md‎

Lines changed: 132 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,132 @@
1-
# docsify-backTop
2-
A docsify plugin that goes back to the top of docs.
1+
# docsify-backTop
2+
3+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/Sumsung524/docsify-backTop/blob/master/LICENSE)[![License: MIT](https://img.shields.io/badge/version-v1.0.0-green.svg?style=flat-square)](https://github.com/Sumsung524/docsify-backTop/releases)
4+
5+
一个[docsify文档](https://docsify.js.org)的返回顶部插件，同时适用于其他需要添加回到顶部组件的所有页面。
6+
7+
8+
9+
演示地址：[docsify backTop Demo](https://xmq.plus/docs#/git/1.%E8%B5%B7%E6%AD%A5)
10+
11+
![screenshot](/screenshot.gif)
12+
13+
## 特征
14+
15+
- 组件显示隐藏
16+
- 页面未滚动，组件隐藏；滚动页面，显示回到顶部组件。
17+
18+
- 缓动动画效果
19+
- 回到顶部、组件显示与隐藏实现缓动动画。
20+
21+
- 支持自定义
22+
- 支持自定义调整组件大小位置、自定义图标、组件背景颜色。
23+
24+
25+
26+
## 安装
27+
28+
### 1. 引入文件
29+
30+
下载docsify-backTop.min.js并放入js文件夹或根目录下，按路径引入文件：
31+
32+
```html
33+
<script src="js/docsify-backTop.min.js"></script>
34+
```
35+
36+
37+
38+
引入文件示例：
39+
40+
```html
41+
<head>
42+
...
43+
<!-- 本地引入(js文件位于根目录下) -->
44+
<script src="docsify-backTop.min.js"></script>
45+
</head>
46+
```
47+
48+
49+
50+
### 2. 引入参数
51+
52+
可在页面底部代码引入参数：
53+
54+
```html
55+
<script>
56+
var docsifyBackTop = {
57+
size: 32, // 数值，组件大小，必填。
58+
bottom: 15, // 数值，组件底部偏移距离，必填。
59+
right: 15, // 数值，组件右侧偏移距离，必填。
60+
logo: '🔝', // logo:字符串或svg矢量图代码，必填。
61+
bgColor: '\#2096ff' // 背景颜色，#fff、pink等，logo为svg图标时，不填。
62+
};
63+
</script>
64+
```
65+
66+
具体参数设置详见下方"参数说明"。
67+
68+
69+
70+
引入位置示例：
71+
72+
```html
73+
<body>
74+
...
75+
<!-- 此处引入 -->
76+
<script>
77+
var docsifyBackTop = {
78+
size: 32, // 数值，组件大小，必填。
79+
bottom: 15, // 数值，组件底部偏移距离，必填。
80+
right: 15, // 数值，组件右侧偏移距离，必填。
81+
logo: '🔝', // logo:字符串或svg矢量图代码，必填。
82+
bgColor: '' // 背景颜色，#fff、pink等，logo为svg图标时，不填。
83+
};
84+
</script>
85+
</body>
86+
```
87+
88+
89+
90+
## 参数说明
91+
92+
| 参数 | 参数取值 | 说明 |
93+
| ------- | ------------------------------------------------------------ | ---------------------------- |
94+
| size | 数值，必填 | 设置回到顶部组件大小 |
95+
| bottom | 数值，必填 | 设置回到顶部组件底部偏移距离 |
96+
| right | 数值，必填 | 设置回到顶部组件右侧偏移距离 |
97+
| logo | 字符、svg代码，内容使用单引号`''`包含，必填 | 设置回到顶部组件Logo |
98+
| bgColor | 16进制颜色码(\#2096ff)、颜色(blue)等，内容使用单引号`''`包含，logo参数为svg图标时，不填。 | 设置回到顶部组件背景底色 |
99+
100+
回到顶部组件Logo中的svg代码可至[阿里巴巴矢量图库](https://www.iconfont.cn/)搜索“回到顶部”，选择自己喜欢的图标复制svg代码设置。
101+
102+
103+
104+
## 推荐参数配置
105+
106+
推荐参数配置如下：
107+
108+
```html
109+
<script>
110+
var docsifyBackTop = {
111+
size: 32,
112+
bottom: 15,
113+
right: 15,
114+
logo: '<svg t="1662288563130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3633" width="200" height="200"><path d="M513 103.7c-226.1 0-409.4 183.3-409.4 409.4S286.9 922.6 513 922.6s409.4-183.3 409.4-409.4S739.1 103.7 513 103.7z m153.5 364.7c-5.2 5.3-12.1 7.9-19 7.9s-13.8-2.6-19-7.9L545.1 385c0 0.4 0.1 0.7 0.1 1.1V705c0 11.1-5.7 20.9-14.4 26.6-4.7 4.2-10.9 6.7-17.7 6.7-6.8 0-13-2.5-17.7-6.7-8.7-5.7-14.4-15.5-14.4-26.6V386.1c0-0.4 0-0.7 0.1-1.1l-83.4 83.4c-10.5 10.5-27.5 10.5-38 0s-10.5-27.5 0-38L494 295.9c10.5-10.5 27.5-10.5 38 0l134.5 134.5c10.5 10.4 10.5 27.5 0 38z" fill="#2096ff" p-id="3634"></path></svg>',
115+
bgColor: ''
116+
};
117+
</script>
118+
```
119+
120+
121+
122+
## 兼容性
123+
124+
关于低版本浏览器兼容性，可能会遇到如下问题：
125+
126+
- 低版本浏览器组件无显示/隐藏的过渡效果。过渡效果通过CSS3中的transition属性设置，过低版本可能无法展示过渡过程，但不影响功能。
127+
128+
129+
130+
## 关于
131+
132+
开发细节及原理或更多设置，可下载本仓库查看`docsify-backTop.js`源码文件。

‎dist/docsify-backTop.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// DOM内容加载完成后执行
2+
window.addEventListener('DOMContentLoaded', function () {
3+
4+
// 4. 封装函数docsifyBackTopFn()
5+
// 4.1 调用函数
6+
docsifyBackTopFn(docsifyBackTop.size, docsifyBackTop.bottom, docsifyBackTop.right, docsifyBackTop.logo, docsifyBackTop.bgColor);
7+
// 4.2 封装函数
8+
function docsifyBackTopFn(backTopSize, backTopBottom, backTopRight, backTopLogo, backTopBGColor) {
9+
10+
// 1. 创建元素
11+
// 1.1 获取body元素
12+
var body = document.body;
13+
// 1.2 创建回到顶部组件div
14+
var div = document.createElement('div');
15+
div.className = 'backTop';
16+
div.innerHTML = backTopLogo;
17+
body.appendChild(div);
18+
// 1.3 回到顶部CSS
19+
div.style.opacity = 0;
20+
div.style.position = 'fixed';
21+
div.style.bottom = backTopBottom + 'px';
22+
div.style.right = backTopRight + 'px';
23+
div.style.width = backTopSize + 'px';
24+
div.style.height = div.style.width;
25+
div.style.textAlign = 'center';
26+
div.style.lineHeight = div.style.width;
27+
div.style.backgroundColor = backTopBGColor;
28+
div.style.borderRadius = '50%';
29+
div.style.cursor = 'pointer';
30+
div.style.transition = 'opacity 0.5s';
31+
32+
// 1.4 svg CSS 如果存在则设置宽高
33+
if (div.children.length) {
34+
div.children[0].style.width = '100%';
35+
div.children[0].style.height = '100%';
36+
}
37+
38+
// 2.点击回到顶部
39+
div.addEventListener('click', function () {
40+
backToTopAnimate(window, 0);
41+
});
42+
// 2.1 回到顶部缓动函数封装
43+
function backToTopAnimate(obj, target, callback) {
44+
clearInterval(obj.timer);
45+
obj.timer = setInterval(function () {
46+
var step = (target - obj.scrollY) / 10;
47+
step = step > 0 ? Math.ceil(step) : Math.floor(step);
48+
if (obj.scrollY == target) {
49+
clearInterval(obj.timer);
50+
callback && callback();
51+
}
52+
window.scroll(0, obj.scrollY + step);
53+
}, 15);
54+
}
55+
56+
// 3.显示与隐藏
57+
window.addEventListener('scroll', function () {
58+
div.style.opacity = window.scrollY > 0 ? 1 : 0;
59+
});
60+
61+
}
62+
});

‎dist/docsify-backTop.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>docsify-backTop</title>
9+
<style>
10+
body {
11+
height: 10000px;
12+
}
13+
</style>
14+
<script src="dist/docsify-backTop.min.js"></script>
15+
</head>
16+
17+
<body>
18+
<script>
19+
var docsifyBackTop = {
20+
size: 32, // 数值，组件大小，必填。
21+
bottom: 15, // 数值，组件底部偏移距离，必填。
22+
right: 15, // 数值，组件右侧偏移距离，必填。
23+
// logo:字符串或svg矢量图代码，必填。
24+
logo: '<svg t="1662288563130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3633" width="200" height="200"><path d="M513 103.7c-226.1 0-409.4 183.3-409.4 409.4S286.9 922.6 513 922.6s409.4-183.3 409.4-409.4S739.1 103.7 513 103.7z m153.5 364.7c-5.2 5.3-12.1 7.9-19 7.9s-13.8-2.6-19-7.9L545.1 385c0 0.4 0.1 0.7 0.1 1.1V705c0 11.1-5.7 20.9-14.4 26.6-4.7 4.2-10.9 6.7-17.7 6.7-6.8 0-13-2.5-17.7-6.7-8.7-5.7-14.4-15.5-14.4-26.6V386.1c0-0.4 0-0.7 0.1-1.1l-83.4 83.4c-10.5 10.5-27.5 10.5-38 0s-10.5-27.5 0-38L494 295.9c10.5-10.5 27.5-10.5 38 0l134.5 134.5c10.5 10.4 10.5 27.5 0 38z" fill="#2096ff" p-id="3634"></path></svg>',
25+
bgColor: '' // 背景颜色，#fff、pink等，logo为svg图标时，不填。
26+
};
27+
</script>
28+
</body>
29+
30+
</html>

‎screenshot.gif‎

1.34 MB
Loading

0 commit comments

Comments
 (0)