页面之返回顶部

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

今天来说一下页面中常见的返回顶部效果。

锚点

1
<a name="top" id="top">返回顶部</a>

放置位置在标签之后随便找个地方放都可以,只要靠近顶部即可。

页面底部放置:

1
<a href="#top" target="_self">返回顶部</a>

#号

#号返回顶部是最最清丽脱俗的一种方法

1
<a href="#">返回顶部</a>

js设置返回顶部

就是一般看到的动画效果的返回顶部啦,我们通过设置基数计算每次执行定时器返回的值。

直接贴代码:

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
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>返回顶部</title>
<style>
#btn {
position: fixed;
padding: 50px 100px;
right: 10px;
bottom: 10px;
display: none;
}
</style>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
var time = 2000;
var timer = null;
var bSys = false; //设置开关 用户如返回途中滑动滚轮则关闭返回顶部
window.onscroll = function() {
if (bSys) {
clearInterval(timer);
}
bSys = true;
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
//滑动大于500时显示返回顶部按钮
if (scrollT > 500) {
oBtn.style.display = 'block';
} else {
oBtn.style.display = 'none';
}
};

//点击上去
oBtn.onclick = function() {
var count = Math.floor(time / 30); //执行次数
var start = document.documentElement.scrollTop || document.body.scrollTop; //获取当前scrollTop值
var dis = 0 - start; //用于计算返回值的差
var n = 0; //每次执行之后加1,当等于总执行次数时关闭定时器
timer = setInterval(function() {
n++;
var num = 1 - n / count; //缓冲基数 当前执行次数/总执行次数 用于计算scrollTop值
var cur = start + dis * (1 - Math.pow(num, 10)); //当前scrollTop值计算
document.documentElement.scrollTop = document.body.scrollTop = cur;
bSys = false;
if (n == count) {
clearInterval(timer);
}
}, 30);
};
};
</script>
</head>

<body style="height:3000px;">
<input type="button" value="返回顶部" id="btn">
</body>

</html>

jq设置返回顶部

因为jq本身封装的动画函数,所以看起来是不是酸爽多了?

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
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>返回顶部</title>
<style>
#btn {
position: fixed;
padding: 50px 100px;
right: 10px;
bottom: 10px;
display: none;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
//当滚动条的位置处于距顶部500以下时,跳转链接出现,否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 500) {
$("#btn").fadeIn(1500);
} else {
$("#btn").fadeOut(1500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#btn").click(function() {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
</script>
</head>

<body style="height:3000px">
<input type="button" value="返回顶部" id="btn">
</body>

</html>

顺便再说一种<a href="javascript:scroll(0,0)">返回顶部</a>和#号返回效果差不多。

总结

现在我们看见形形色色的返回顶部,漂亮的动画看起来更吸引我们的眼球,但其实如果只是为了返回顶部加个#号也未尝不可,至少京东就是这么做的,用起来也并没有觉得缺少了动画,少了体验少了优雅,反正我觉得还好,每个网站都是动画效果,当今社会网站这么多,早就看麻木了,所以如果为了干净快捷,那就尝试一下#号返回吧!