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

程序员文章站 2022-08-31 22:45:09
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;
 	}
 	p {
 	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"/>
 	<p>
 	我是最顶端.....<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>
 	 
 	 
 	</p>
 	</body>
 	</html>
上一篇： Python基础——模块与包
下一篇： oracle对日期的操作讲解