# 使用原生js实现一个回到顶部的功能
css:
.container {
width: 900px;
height: 3000px;
background-color: orange;
margin: 0 auto;
}
#btn {
position: fixed;
bottom: 100px;
left: 50px;
display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
html:
<div class="container"></div>
<button id="btn">back to top</button>
1
2
2
javascript:
window.onload = function(){
let btn = document.querySelector('#btn')
let clientHeight = document.documentElement.clientHeight
window.onscroll = function(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
btn.style.display = scrollTop > clientHeight ? 'block' : 'none'
}
let speed
function scroll(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop > 0){
document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed
speed+=2
setTimeout(scroll,13)
}
}
btn.onclick = function(){
speed = 10
scroll()
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
speed以及speed+=2可以控制滚动的速度以及加速度