这几天因为喜欢看漫画，而个人也喜欢写点网站，索性就自己写了一个漫画推荐网站，上面记录下自己看完的漫画，包括观感如何都有打分，只不过这个分只是我个人主观得分而已
扯远了扯远了，本文是在做网站返回顶部这个功能(后面简称“回顶”)时得到的一些感想，希望我的这个文章可以给朋友们一点灵感🥱
起因是我在网路上搜索回顶功能代码，得到的基础功能是js设置点击事件给button使用scrollTop属性回顶到顶部，代码如下：
1
2
3
4
5
|
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
|
按着网上的思路写完了，实际点击也确实是能回到顶部，但是
怎么感觉哪里不够漂亮？
…..
哦，没有动画！
私认为动画是js以及网页操作的灵魂，没有动画就像是新年除夕夜上没有穿上红秋裤一样令人失望
所以，该怎么加动画呢
我又开始面向百度编程了（喜）
…..
经过一段时间的查找，我开始有了眉目：
果断抛弃scrollTop的设置顶部距离，换上我们的锚点链接！
同时换上一个可以操作滚动条的属性：scroll-behavior: smooth;
具体代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="zh-CN" id="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#html {
scroll-behavior: smooth;
}
.to-top {
position: fixed;
width: 60px;
height: 60px;
line-height: 60px;
bottom: 50px;
right: 100px;
background-color: #ddd;
color: #fff;
border: 1px solid #f4f5f7;
border-radius: 18px;
font-size: 12px;
text-decoration: none;
text-align: center;
}
.content {
width: 1200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="main">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<a href="#html" class="to-top" id="gotop">回到顶部</a>
</body>
</html>
|
现在是返回的功能和动画都有了，基本圆满了吧
哎，还没有
前几天我再在逛知乎的时候发现一个东西：
知乎的回顶按钮在一开始我页面本来在顶部时是没有的，等我小小的划了一下鼠标滚轮，哎，他就有了，等我再花上去又没有了
嘿，这玩意高级，不过思路也挺容易想的：
- 做一个页面滑动事件，我只要一滑动页面它就会触发里面的代码
- 获得此时我的视窗离文档的顶部的距离
- 设置下距离顶部多少高度时将按钮display：block即可，按钮平常就设置none隐藏起来即可
大致的js代码如下（这里我设置的低于100px隐藏）：
1
2
3
4
5
6
7
8
| window.addEventListener('scroll', function () {
let px = parseInt(document.documentElement.scrollTop);
if(parseInt(px)<=100){
document.querySelector('#gotop').style.display="none";
}else{
document.querySelector('#gotop').style.display="block";
}
})
|
本文所有具体代码如下，有一些新增代码我都做了注释：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <!DOCTYPE html>
<html lang="zh-CN" id="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 设置需要滚动到的元素的 scroll-behavior 属性,
这里我们设置了 html 元素（一般来说，如果是回到顶部的话，
设置body和html的scroll-behavior属性，去到指定位置，
则设置那个元素的scroll-behavior属性） */
#html {
scroll-behavior: smooth;
}
#main {
display: flex;
align-items: center;
flex-direction: column;
}
.to-top {
display: none;
position: fixed;
width: 60px;
height: 60px;
line-height: 60px;
bottom: 50px;
right: 100px;
background-color: #ddd;
color: #fff;
border: 1px solid #f4f5f7;
border-radius: 18px;
font-size: 12px;
text-decoration: none;
text-align: center;
}
.content {
width: 1200px;
height: 200px;
background-color: lightblue;
}
#p {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p id="p">0px</p>
<div id="main">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<a href="#html" class="to-top" id="gotop">回到顶部</a>
</body>
<script>
const p = document.querySelector('#p');
window.addEventListener('scroll', function () {
let px = p.innerHTML = parseInt(document.documentElement.scrollTop)+'px';
if(parseInt(px)<=100){
document.querySelector('#gotop').style.display="none";
}else{
document.querySelector('#gotop').style.display="block";
}
})
</script>
</html>
|
具体关于scrioll-behavior的知识可以看MDN的解释：
