背景介绍
当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。
如今在我们浏览网站的时候，常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种，一种是直接回到页面的顶部，这种方式简单粗暴；另外一种则是自动滚动间接回到页面顶部，这样一来视觉体验上可能更好，但是用户需要过几秒才能看到顶部内容。
例如掘金，在滚动到一定高度时会出现“回到顶部”按钮，点击后会直接回到页面顶部，就是上文说到的第一种情况。
实现
动态显示滚动按钮
“回到顶部”并不是一直显示的，而是滚动到一定值才出现的，因此应该在window.onscroll里定义一个判断事件。
1
2
3
4
5
6
7
8
9
10
11
12
| window.onscroll = function () {
var currentHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
// 页面滚动超过300px就显示
if (currentHeight > 300) {
document.getElementById('backtop').style.display = 'block'
} else {
document.getElementById('backtop').style.display = 'none'
}
}
|
直接回到顶部
锚点
最简单的方法。给顶部的div一个id，点击直接回到这个div元素，但是URL上会出现#top。
1
2
3
| <div id="top"></div>
......
<a href="#top">回到顶部</a>
|
控制滚动条回到指定位置，第一个参数是距离页面左端的距离，第二个参数是距离页面顶部的距离。
1
| <a href="javascript:scrollTo(0, 0)">回到顶部</a>
|
控制滚动条垂直偏移。
1
2
3
4
5
6
7
| <a onclick="byScrollTop()">回到顶部</a>
......
function byScrollTop() {
document.documentElement.scrollTop = 0;
window.pageYOffset = 0; // 兼容ios
document.body.scrollTop = 0; // 兼容低版本ie
}
|
该方法可把内容滚动指定的像素数。第一个参数指向右滚动的像素，第二个参数指向下滚动的参数，负数可使方向相反。
1
2
3
4
5
6
7
8
9
| <a onclick="byScrollBy()">回到顶部</a>
......
function byScrollBy() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
scrollBy(0, -topHeight);
}
|
间接回到顶部
定时器实现滚动动画
通过定时器实现固定速度的自动滚动动画效果。但是这样会有个问题，就是当页面内容十分多的时候，这个时候离顶部已经有很长一段距离了。如果还是一个固定速度的话，可能会长达10秒钟，这对用户体验来说是不友好的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <a onclick="scrollToTop()">回到顶部</a>
......
function scrollToTop() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
scrollBy(0, -100);
// 模拟鼠标向上滚动事件
scrolldelay = setTimeout('scrollToTop()', 50);
// 清除滚动事件，避免无法向下移动
if (topHeight === 0) {
clearTimeout(scrolldelay);
scrolldelay = null;
}
}
|
定时器实现滚动动画-改良版
基于上面这个问题，我们可以设置一个速度的最小值，让滚动速度从快到慢，但也不至于过慢。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function scrollToTop() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
scrollBy(0, -speed);
// 模拟鼠标向上滚动事件
scrolldelay = setTimeout('scrollToTop()', 50);
// 清除滚动事件，避免无法向下移动
if (topHeight === 0) {
clearTimeout(scrolldelay);
scrolldelay = null;
}
}
|
最终效果
完整代码
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
| <style>
a {
display: block;
}
#top {
height: 2000px;
background-color: #999
}
#backtop {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
background-color: #fff;
z-index: 9;
}
</style>
<body>
<div id="top">
这里是页面顶部
</div>
<div id="backtop">
<a href="#top">回到顶部-锚点</a>
<a href="javascript:scrollTo(0, 0)">回到顶部-scrollTo函数</a>
<a onclick="byScrollTop()">回到顶部-scrollTop函数</a>
<a onclick="byScrollBy()">回到顶部-scrollBy函数</a>
<a onclick="scrollToTop()">回到顶部-定时器动画版</a>
</div>
<script>
window.onscroll = function () {
var currentHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
console.log(currentHeight, "currentHeight");
if (currentHeight > 300) {
document.getElementById('backtop').style.display = 'block'
} else {
document.getElementById('backtop').style.display = 'none'
}
}
function byScrollTop() {
document.documentElement.scrollTop = 0;
window.pageYOffset = 0; // 兼容ios
document.body.scrollTop = 0; // 兼容低版本ie
}
function byScrollBy() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
scrollBy(0, -topHeight);
}
function scrollToTop() {
var topHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
scrollBy(0, -speed);
// 模拟鼠标向上滚动事件
scrolldelay = setTimeout('scrollToTop()', 50);
// 清除滚动事件，避免无法向下移动
if (topHeight === 0) {
clearTimeout(scrolldelay);
scrolldelay = null;
}
}
</script>
</body>
|