JS返回头部小火箭(运用window.scroll（x,y）)方法

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	img {
	position: fixed;
	bottom: 100px;
	right: 50px;
	cursor: pointer;
	display: none;
	border: 1px solid #000;
	}
	div {
	width: 1210px;
	margin: 100px auto;
	text-align: center;
	font: 500 26px/35px "simsun";
	color: red;
	}
	</style>
	<script src="animate.js"></script>
	<script>
	window.onload = function () {
	//需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
	//难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
	// 技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
	//步骤：
	//1.老三步
	var img = document.getElementsByTagName("img")[0];
	window.onscroll = function () {
	//被卷去的距离大于200显示小火箭，否则隐藏
	//2.显示隐藏小火箭
	if(scroll().top>1000){
	img.style.display = "block";
	}else{
	img.style.display = "none";
	}
	//每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
	leader = scroll().top;
	}
	//3.缓动跳转到页面最顶端（利用我们的缓动动画）
	var timer = null;
	var target = 0; //目标位置
	var leader = 0; //显示区域自身的位置
	img.onclick = function () {
	//技术点：window.scrollTo(0,0);
	//要用定时器，先清定时器
	clearInterval(timer);
	timer = setInterval(function () {
	//获取步长
	var step = (target-leader)/10;
	//二次处理步长
	step = step>0?Math.ceil(step):Math.floor(step);
	leader = leader +step;
	//显示区域移动
	window.scrollTo(0,leader);
	//清除定时器
	if(leader === 0){
	clearInterval(timer);
	}
	},25);
	}
	}
	</script>

	</head>
	<body>
	<img src="images/Top.jpg"/>
	<div>
	我是最顶端.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>
	风吹马尾千条线，雨打羊毛一片毡.....<br>


	</div>
	</body>
	</html>

JS返回头部小火箭(运用window.scroll（x,y）)方法

猜你喜欢