上代码：

<!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 回到顶部 动画效果的更多相关文章

  1. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  2. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  3. 纯javascript 回到 顶部 实例

    很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...

  4. javascript 通用loading动画效果

    由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法: 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); ...

  5. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  6. js+css实现点击回到顶部的效果（最低兼容至ie7）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. JavaScript Timer实现动画效果

    <style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 1 ...

  8. javascript 回到顶部

    <script type="text/javascript"> window.onload = function(){ var timer = null; //用于判断 ...

  9. js回到顶部 动画速度 （自己记录）

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

随机推荐

  1. Centos6.7安装mysql 5.6简单教程

    今天项目经理让我给服务器配一下mysql,以前配置mysql的时候,感觉好麻烦,前几天也帮朋友配置来着,今天装的时候一直报错,百度也没搞明白,所以打算换种方法装mysql,无意中发现了还有这种操作,容 ...

  2. 邓_html_选项卡

    ================================================= ================[  选项卡  ]================= ======= ...

  3. 【开发技术】Eclipse插件Call Hierarchy简介及设置

    Call Hierarchy 主要功能是 显示一个方法的调用层次(被哪些方法调,调了哪些方法) 在MyEclipse里Help - Software updates - Find and instal ...

  4. Angular 4 自定义组件封装遇见的一些事儿

    你用Angular 吗? 一.介绍 说说封装Angular 组建过程中遇见的一些问题和感悟.用久了Angular,就会遇见很多坑,许多基于Angular开发的框架最喜欢做的事情就是封装组件,然后复用. ...

  5. Python 使用Pillow模块生成验证码

    1.安装 pip3 install pillow 2.使用步骤 生成验证码和验证字符串 绘制图片,将验证码放入session中 将图片返回给页面 3.代码demo #!/usr/bin/env pyt ...

  6. 一次线上tomcat应用请求阻塞的排查经过

    今天早上,收到一个报警,有个服务器的http往返时延飙升,同时曝出大量404,很是折腾了一番,特记录下思考和排查经过. 1.这是单纯的时延增大,还是有什么其他情况还未掌握? 因为不知道是只有时延变大而 ...

  7. 小打卡PRD

    目标:打造一款不同于市场上的公开打卡app的产品 理念:通过监督和鼓励,和相同圈子的人一起互相鼓励.分享及监督,共同进步. 优点: 模板消息通知,网上基本通过小程序中逻辑层JS完成推送的请求,小打卡在 ...

  8. python3 第七章 - 循环语句

    为了让计算机能计算成千上万次的重复运算,我们就需要循环语句. Python中的循环语句有 while for 循环语句的执行过程,如下图: while 循环 Python中while语句的一般形式: ...

  9. Windows核心编程&进程

    1. 进程的定义 说白了进程就是一个正在运行的执行程序,包含内核对象和独立的地址空间,内核对象负责统计和管理进程信息,地址空间包括所有可执行文件或DLL 模块的代码和数据.动态内存分配(线程堆和栈的分 ...

  10. ECLIPS-S测井系统下的仪器挂接 [TCC模块]

    1. 环境 HPUX版本:11.23 Complete Image ECLIPS版本:Rel 5.1i 2. 效果图 3. 用途 为以后在此系统中挂接新仪器打下坚实的基础. 4. 参考资料 ECLIP ...