<!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:auto;height:2000px">
<div style="position: fixed;bottom: 50px;right: 10%; text-align:center; line-height:30px; cursor:pointer; background:red;width:80px;height: 30px;-webkit-background-size: 100%;background-size: 100%;z-index: 1001;" 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>