上代码：

<!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. C#应用程序运行到linux【CentOS】

    具体的操作方法在linux.Net中.最近要部署网站在centOS,以及测试下小程序跑到上面.刚好实现了一番 说说C#应用程序如何跑到centOS.非常的简单. 1.准备工具“AnyExec”[工具在 ...

  2. linux下 ls -l 命令显示结果每一列代表什么意思

    第一个栏位,表示文件的属性.Linux的文件基本上分为三个属性:可读(r),可写(w),可执行(x).但是这里有十个格子可以添(具体程序实现时,实际上是十个bit位).第一个小格是特殊表示格,表示目录 ...

  3. Yourphp系统发生错误

    今天早用YP更新缓存,弹出如下错误: 随之而来的是错误信息是: [php] view plain copy [14-12-03 10:48:12] E:\wwwweb\xmwszt360\Core\L ...

  4. springmvc图片上传（兼容ie8以上，实时预览）

    html代码: <form id="uploadform" method="post" enctype="multipart/form-data ...

  5. BSA Network Shell系列-nexec | runcmd | runscript | scriptutil的异同

    说明下nexec.runcmd.runscript.scriptutil的异同 相同点: 四者都可以在远程机器执行命令.或者调用脚本. 不同点: nexec支持NSH命令,可以执行远程机的本地命令(非 ...

  6. Linux平台ORACLE INSTANT客户端安装

    下载安装文件 先去ORACLE官方网站下载所需版本的Instant Client Package 和 Instant Client Package - SQL*Plus安装包,(千万注意版本) htt ...

  7. ios GCD将异步转换为同步

    在开发中有时需要等网络请求完成之后拿到数据做一些操作,而且有时是同时好几个网络请求同时发起.这时会有对异步操作进行更进一步控制的场景,不单网络请求,有时一些其他本地文件,多张图片处理等可能都会遇到这种 ...

  8. SSE图像算法优化系列十五：YUV/XYZ和RGB空间相互转化的极速实现（此后老板不用再担心算法转到其他空间通道的耗时了）。

    在颜色空间系列1: RGB和CIEXYZ颜色空间的转换及相关优化和颜色空间系列3: RGB和YUV颜色空间的转换及优化算法两篇文章中我们给出了两种不同的颜色空间的相互转换之间的快速算法的实现代码,但是 ...

  9. tp5命令行基础

    命令行工具需要在命令行下面执行,请先确保你的php.exe已经加入了系统环境变量Path. 要执行命令,首先进入命令行,并切换当前目录到应用的根目录(也就是think文件所在目录)下面,执行: php ...

  10. Git分支管理[三]

    标签(linux): git 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 git分支管理命令 git branch #创建分支 git branch -v # ...