JS动画之返回顶部案例
需求：一开始返回顶部图标是隐藏的，当滚动到指定位置的时候，小图标就会显示出来，，点击图标，会缓动的返回顶部
技术点：window.scrollTo(x,y)，浏览器显示区域跳转到指定的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
img{
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
display: none;
}
div{
width: 1210px;
margin:100px auto;
text-align: center;
font:500 26px/35px "simsun";
color: red;
}
</style>
</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>
<script type="text/javascript">
//需求：被卷去头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
//难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕
//技术点：window.scrollTo(x,y)，浏览器显示区域跳转到指定的坐标
//步骤：
var img = document.getElementsByTagName('img')[0];
window.onscroll =function(){
if (window.pageYOffset>100) {
img.style.display="block";
}else{
img.style.display="none";
}
//每次移动的时候都给leader赋值，模拟leader距离顶部的距离
leader = window.pageYOffset;
}
var timer = null;
var target = 0;//目标值
var leader = 0;//显示自身区域的位置
img.onclick = function(){
//屏幕缓慢移动到最顶端。
//定时器
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>
</body>
</html>
浙公网安备 33010602011771号