Skip to content

Commit 0411329

Browse files
Sumsung524Sumsung524
committed
简化安装，内置参数默认值
1 parent aefe17b commit 0411329

File tree

5 files changed

+108
-42
lines changed

5 files changed

+108
-42
lines changed

‎README.md‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,15 @@
2020

2121
- 支持自定义
2222
- 支持自定义调整组件大小位置、自定义图标、组件背景颜色。
23+
- 快速安装
24+
- 仅需引入JS文件一行代码即可安装完成。
2325

2426

2527

26-
## 安装
2728

28-
### 1. 引入文件
29+
## 安装
2930

30-
jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件：
31+
jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件至HTML页面中：
3132

3233
```html
3334
<!-- jsDelivr -->
@@ -49,25 +50,31 @@ jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件：
4950
</body>
5051
```
5152

53+
此时即可查看默认效果，如果不需要进行参数设置，那么你的安装已经结束。
54+
5255

5356

54-
### 2. 引入参数
57+
## 配置参数
5558

56-
可在页面底部代码引入参数：
59+
如果需要对回到顶部组件位置、大小、图标及背景颜色进行设置，可参考以下参数设置。
60+
61+
### 引入参数
62+
63+
可在HTML页面底部代码引入参数（按需设置，不需要设置的参数不要写入）：
5764

5865
```html
5966
<script>
60-
var docsifyBackTop = {
61-
size: 32, // 数值，组件大小，必填。
62-
bottom: 15, // 数值，组件底部偏移距离，必填。
63-
right: 15, // 数值，组件右侧偏移距离，必填。
64-
logo: '🔝', // logo:字符串或svg矢量图代码，必填。
67+
docsifyBackTop = {
68+
size: 32, // 数值，组件大小，默认值32。
69+
bottom: 15, // 数值，组件底部偏移距离，默认值15。
70+
right: 15, // 数值，组件右侧偏移距离，默认值15。
71+
logo: '🔝', // logo:字符串或svg矢量图代码，默认为svg代码图标。
6572
bgColor: '\#2096ff' // 背景颜色，#fff、pink等，logo为svg图标时，不填。
6673
};
6774
</script>
6875
```
6976

70-
具体参数设置详见下方"参数说明"。
77+
具体各项参数设置详见下方"参数说明"。
7178

7279

7380

@@ -78,12 +85,8 @@ jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件：
7885
...
7986
<!-- 此处引入 -->
8087
<script>
81-
var docsifyBackTop = {
82-
size: 32, // 数值，组件大小，必填。
83-
bottom: 15, // 数值，组件底部偏移距离，必填。
84-
right: 15, // 数值，组件右侧偏移距离，必填。
85-
logo: '🔝', // logo:字符串或svg矢量图代码，必填。
86-
bgColor: '' // 背景颜色，#fff、pink等，logo为svg图标时，不填。
88+
docsifyBackTop = {
89+
// ... 填入需要自定义的配置项参数
8790
};
8891
</script>
8992
<!-- jsDelivr -->
@@ -95,27 +98,27 @@ jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件：
9598

9699

97100

98-
## 参数说明
101+
### 参数说明
99102

100-
| 参数 | 参数取值 | 说明 |
101-
| ------- | ----------------------------------------------------------------------------------------- | ---------------------------- |
102-
| size | 数值，必填 | 设置回到顶部组件大小 |
103-
| bottom | 数值，必填 | 设置回到顶部组件底部偏移距离 |
104-
| right | 数值，必填 | 设置回到顶部组件右侧偏移距离 |
105-
| logo | 字符、svg代码，内容使用单引号`''`包含，必填 | 设置回到顶部组件Logo |
103+
| 参数 | 参数取值 | 说明 |
104+
| ------- | ------------------------------------------------------------ | ---------------------------- |
105+
| size | 数值，选填，默认值32 | 设置回到顶部组件大小 |
106+
| bottom | 数值，选填，默认值15 | 设置回到顶部组件底部偏移距离 |
107+
| right | 数值，选填，默认值15 | 设置回到顶部组件右侧偏移距离 |
108+
| logo | 字符、svg代码，内容使用单引号`''`包含，选填，默认值为sbg矢量图代码。 | 设置回到顶部组件Logo |
106109
| bgColor | 16进制颜色码(\#2096ff)、颜色(blue)等，内容使用单引号`''`包含，logo参数为svg图标时，不填。 | 设置回到顶部组件背景底色 |
107110

108111
回到顶部组件Logo中的svg代码可至[阿里巴巴矢量图库](https://www.iconfont.cn/)搜索“回到顶部”，选择自己喜欢的图标复制svg代码设置。
109112

110113

111114

112-
## 推荐参数配置
115+
### 默认参数配置
113116

114-
推荐参数配置如下：
117+
默认参数配置如下，仅供参考，如需修改，仅保留修改项，其余配置项删除：
115118

116119
```html
117120
<script>
118-
var docsifyBackTop = {
121+
docsifyBackTop = {
119122
size: 32,
120123
bottom: 15,
121124
right: 15,
@@ -125,13 +128,14 @@ jsDelivr CDN引入或本地方式引入`docsify-backTop.min.js`文件：
125128
</script>
126129
```
127130

128-
131+
需要自定义的属性进行写入，不需要设置的参数项直接删除即可。
129132

130133
## 兼容性
131134

132135
关于低版本浏览器兼容性，可能会遇到如下问题：
133136

134137
- 低版本浏览器组件无显示/隐藏的过渡效果。过渡效果通过CSS3中的transition属性设置，过低版本可能无法展示过渡过程，但不影响功能。
138+
- 含ES6新特性语法开发且未转码，可能存在低版本浏览器不兼容现象，如需在低版本浏览器考虑兼容性问题，推荐使用v1.0.0~v1.0.1版本，并且配置参数(v1.0.0~v1.0.1版本无默认配置)。
135139

136140

137141

‎dist/docsify-backTop copy.js‎

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

‎dist/docsify-backTop.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1+
var docsifyBackTop = new Object();
12
// DOM内容加载完成后执行
23
window.addEventListener('DOMContentLoaded', function () {
34

45
// 4. 封装函数docsifyBackTopFn()
56
// 4.1 调用函数
67
docsifyBackTopFn(docsifyBackTop);
78
// 4.2 封装函数
8-
function docsifyBackTopFn(obj) {
9+
function docsifyBackTopFn({ 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>', bottom = 15, right = 15, size = 32, bgColor = '' }) {
910

1011
// 1. 创建元素
1112
// 1.1 获取body元素
1213
var body = document.body;
1314
// 1.2 创建回到顶部组件div
1415
var div = document.createElement('div');
1516
div.className = 'backTop';
16-
div.innerHTML = obj.logo;
17+
div.innerHTML = logo;
1718
body.appendChild(div);
1819
// 1.3 回到顶部CSS
1920
div.style.opacity = 0;
2021
div.style.position = 'fixed';
21-
div.style.bottom = obj.bottom + 'px';
22-
div.style.right = obj.right + 'px';
23-
div.style.width = obj.size + 'px';
22+
div.style.bottom = bottom + 'px';
23+
div.style.right = right + 'px';
24+
div.style.width = size + 'px';
2425
div.style.height = div.style.width;
2526
div.style.textAlign = 'center';
2627
div.style.lineHeight = div.style.width;
27-
div.style.backgroundColor = obj.bgColor;
28+
div.style.backgroundColor = bgColor;
2829
div.style.borderRadius = '50%';
2930
div.style.cursor = 'pointer';
3031
div.style.transition = 'opacity 0.5s';

‎dist/docsify-backTop.min.js‎

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

‎index.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,12 @@
1515
</head>
1616

1717
<body>
18+
<!-- 自定义参数引入至文档末尾 -->
1819
<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图标时，不填。
20+
docsifyBackTop = {
21+
// 该处配置自定义配置参数，不需要自定义的不要写入，示例如下
22+
logo: '🔝',
23+
bgColor: '\#2096ff'
2624
}
2725
</script>
2826
</body>

0 commit comments

Comments
 (0)