验证中...
本周日【珠海源创会】一起聊聊:PingCAP分布式事务、支付宝移动端实践、GSBN技术框架选型,点此报名占座
语言: JavaScript
分类: JavaScript 工具
最后更新于 2018-11-09 19:09
gistfile1.txt
原始数据 复制代码
!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
height: 5000px;
background: url(images/2.jpg);
}
.backtotop{
position: fixed;
width: 120px;
height: 120px;
right: 10px;
bottom: 30px;
background-color: yellowgreen;
display: none;
}
</style>
</head>
<body>
<a href="javascript:;" class="backtotop" id="backtotop">回到顶部</a>
<script type="text/javascript" src="js/tween.js"></script>
<script type="text/javascript">
var btn = document.getElementById("btn");
var btn = document.getElementById("btn");
backtotop.onclick = function(){
scrollAnimate(0,1000);
this.style.backgroundPosition = "-120px 0";
}
window.onscroll = function(){
var st = document.body.scrollTop || document.documentElement.scrollTop;
if(st > 500){
backtotop.style.display = "block";
}else{
backtotop.style.display = "none";
}
}
function scrollAnimate(target,time){
var frameNumber = 0; //帧编号
var start = document.body.scrollTop || document.documentElement.scrollTop; //起点
var distance = target - start;
var interval = 10;
var maxFrame = time / interval;
clearInterval(timer);
var timer = setInterval(function(){
frameNumber++;
if(frameNumber == maxFrame){
clearInterval(timer);
}
//第一个参数t表示当前帧编号
//第二个参数b表示起始位置
//第三个参数c表示变化量
//第四个参数d表示总帧数
document.body.scrollTop = document.documentElement.scrollTop = CubicEaseInOut(frameNumber,start,distance,maxFrame);
},10);
function CubicEaseInOut(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
}
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close