Bilibili返回顶部功能实现

Bilibili返回顶部功能实现

---

最近学着开发网站，学校又是实训前端，也就多练练。

一开始是看水无月打牌注意到的，挺有趣就试着实现了一下

---

实现原理

它的图是长图（瞬间想到打点计时器好吧），通过改变backgroundPositionX来换图，来实现一个类似火箭加速的动画，当用完七个图的部分时，改变transform配合transition实现上升效果，此时使用js让屏幕跟着向上滚动到顶部。

1. 图

2. 实现代码

Html代码:

<!--用来对照-->
<div class="text"></div>
<!--回到顶部小火箭-->
<div class="go_top" id="go_top" onclick="go_back()"></div>

css代码：

/**模拟网站主体板块**/
.text{
	width: 1000px;
	height: 2000px;
	margin: 0 auto;
	background-color: wheat;
}
/**定位在右侧栏**/
.go_top{
	position: fixed;
	bottom: 100px;
	right: 20px;
	transform: translateY(0);
	width: 62px;
	/**height: 85px;**/
	height: 90px;
	margin-left: 602px;
	cursor: pointer;
	background-image: url('img/space-to-top.png');
	background-position: -40px -44px;
}
/**起飞时，飞出页面外**/
.go_top.fly{
	transform: translateY(-1000px);
	transition: transform .3s ease-in;
}

Js代码：

/**返回顶部功能**/
/**取标签类，对窗口到达高度进行判断，高于100显示，否则隐藏**/
var go_top = document.querySelector('.go_top');
window.onscroll = function(){
	var t = document.documentElement.scrollTop || document.body.scrollTop;
	
	if ( t >= 100 ){
		go_top.style.display = 'block';
	}else{
		go_top.style.display = 'none';
	}
}
/**被点击后，通过不断改变backgroundPositionX来换图，满图后起飞**/
function go_back(){
	var nums = new Array();
	nums = [182, 325, 611, 469, 754, 897, 40];/**一个个测试来的**/
	var i = 0;
	var go_top = 0;
	var timer = setInterval(function(){
		go_top = -nums[i];
		document.getElementById('go_top').style.backgroundPositionX = go_top + "px";
		i++;
/**起飞，改变类名，获得transform: translateY(-1000px)属性，飞出页面外**/
		if ( i > 7 ){
			clearInterval(timer);
			document.getElementById('go_top').className = "go_top fly";
			var to = document.documentElement.scrollTop || document.body.scrollTop;
			
			var goer = setInterval(function(){/**屏幕跟着向顶端移动**/
				to -= 100;
				if ( to <= 0 ){
					clearInterval(goer);
					/**类名改回来，以便下次使用**/
					document.getElementById('go_top').className = "go_top";
				}
				document.documentElement.scrollTop = document.body.scrollTop = to;
			}, 20)
		}
	}, 100)
}