当页面过长时，通常会在页面下方有一个返回顶部的button，总结一下，大概三种实现方法，下面说下各方法及优缺点。
方法一 锚点定位
|
1
|
<a href=
"#"
class=
"top"
id=
"top"
>返回頂部</a>
|
这种方法设置方便，但缺点是会刷新页面（我是在同事的乐视手机上发现的）。
方法二 window.scrollTo(x,y)
|
1
|
<a href=
"javascript:scrollTo(0,0)"
class=
"top"
id=
"top"
>返回頂部</a>
|
这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。
scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标，比如我设置scrollTo(100,100)，就是让滚动内容的坐标（100,100）的点处在视口的左上角。
方法三 jQuery插件设置带有动画效果的滚动
原生方法
|
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
|
/* html部分 */
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href=
"javascript:;"
class=
"top"
id=
"top"
>返回頂部</a>
</body>
<style>
/* css部分 */
div {
height: 150px;
}
div:nth-child(odd) {
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#8ae238;
}
div:nth-child(even) {
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#66d9ef;
}
.top {
position: fixed;
right: 50px;
bottom: 50px;
display: block;
width: 50px;
height: 50px;
font-size: 20px;
display: none;
}
</style>
<script>
/* js代码 */
var
topBtn = document.getElementById(
'top'
);
// 获取视窗高度
var
winHeight = document.documentElement.clientHeight;
window.onscroll =
function
() {
// 获取页面向上滚动距离，chrome浏览器识别document.body.scrollTop，而火狐识别document.documentElement.scrollTop，这里做了兼容处理
var
toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滚动超过一屏，返回顶部按钮出现，反之隐藏
if
(toTop>=winHeight){
topBtn.style.display =
'block'
;
}
else
{
topBtn.style.display =
'none'
;
}
}
topBtn.onclick=
function
() {
var
timer = setInterval(
function
() {
var
toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判断是否到达顶部，到达顶部停止滚动，没到达顶部继续滚动
if
(toTop == 0){
clearInterval(timer);
}
else
{
// 设置滚动速度
var
speed = Math.ceil(toTop/5);
// 页面向上滚动
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}
</script>
|
大概的思路就是：
为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮
为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以5的方式，滚动速度由快到慢。这里使用js定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧'的感觉。
这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。
jQuery特效方法
jQuery方法只是在js代码部分不同，具体代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
/* js代码 */
$(window).on(
'scroll'
,
function
() {
// 判断显示还是隐藏按钮
if
($(
this
).scrollTop()>=$(
this
).height()){
$(
'#top'
).fadeIn(
'slow'
);
}
else
{
$(
'#top'
).fadeOut(
'slow'
);
}
});
$(
'#top'
).on(
'click'
,
function
() {
// 设置滚动动画，这里注意使用的是$('body')不是$(window)
$(
'body'
).animate({scrollTop:
'0'
},500);
});
</script>
|
jQuery方法的优点是方便，而且动画效果比较流畅。
这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象，因为我们是要设置body的scrollTop属性。
总结
三个方法各有优劣，不过总体来讲，jQuery的方法更适合大多数场景。