javascript 回到顶部 动画效果

上代码：

<!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>

 

posted @ 2017-05-04 11:43  两面一汤  阅读(165)  评论(0)  编辑  收藏  举报