top/bottom

Posted on

回到顶部 || 到达底部

代代告诉您它是怎么实现的！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div{
	width: 45px;
}
span{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	background: black;
	color: white;
	font-size: 20px;
	line-height: 60px;
	text-align: center;
}
1
2
<div>
	我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽我是代丽我是代美丽</div>
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
var span = document.querySelector('span');
var bodyH = document.body.clientHeight;
//body的可视内容总高度(不包括边框)
//body 盒模型实际大小 = document.body.offsetHeight （包括边框）
var bodyoff = document.body.offsetHeight;
var windowH = document.documentElement.clientHeight;
//获取窗口可视高度，或是说窗口高度
span.onclick = function (){
	myFn(0);//回到顶部
//myFn(bodyoff - windowH);//到达底部
}
	
/*
 * 函数注释
 * 改变元素滚动条高度动画函数
 * end参数是最终高度，不可为空
 * fn参数是计时器结束后执行的回调函数，可为空
 */
function myFn(end,fn){
	//兼容获取scrollTop
	var start = document.body.scrollTop || document.documentElement.scrollTop ;
	//初始高度
	var change = end - start;
	//改变的高度值
	var t = 0;
	//第几步开始
	var endT = 30;
	//执行步数
	var timer = setInterval(function(){
	//设置计时器
		t++;
		//每30毫秒加一步
		if(t >= endT){
		//当到达第30步时执行if里的代码块
			clearInterval(timer);
			//endT步后清除计时器
			//如果fn是一个函数则执行fn()，否则不执行
			fn && fn();
		}
		var sTop = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
		//兼容
		document.body.scrollTop = sTop;
		//非IE可控制
		document.documentElement.scrollTop = sTop;
		//IE可控制
	},30);
}