您的位置：首页 > Web前端 > JavaScript

javascript 回到顶部动画效果

2017-05-04 11:43 417 查看

上代码：

<!DOCTYPE html>
<html>
<head>
<meta content="测试demo" name="Keywords">
<meta content="测试demo" name="Description">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js原生回到顶部</title>
</head>
<body style="width:100%;height:2000px">
<div style="position: fixed;bottom: 50px;right: 10%;" id="$backtotop">按钮</div>
<script>
!(function () {
var Animate = function (dom) {
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.duration = null;
if (!this.start) {
Animate.prototype.start = function (endPos, duration) {
this.startTime = +new Date;
this.startPos = document.body.scrollTop;
this.endPos = 0;
this.duration = duration;
var self = this;
var timeId =
setInterval(function () {
if (self.step() === false) {
clearInterval(timeId);
}
}, 19);
}; Animate.prototype.step = function () {
var t = +new Date;
if (t >= this.startTime + this.duration) {
this.update(this.endPos); return false;
}
var pos = function (t, b, c, d) {
return c * t / d + b;
};
this.update(pos(t - this.startTime,
this.startPos,
this.endPos - this.startPos,
this.duration));
}; Animate.prototype.update = function (pos) {
document.body.scrollTop = pos;
};
};
};
document.getElementById("$backtotop").onclick = function () {
var animate = new Animate();
animate.start(0, 300);
};
})();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript 回到顶部 动画效果

javascript 回到顶部动画效果