上代码：

<!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. POJ 1426 Find The Multiple（数论——中国同余定理）

    题目链接: http://poj.org/problem?id=1426 Description Given a positive integer n, write a program to find ...

  2. C++ 初始化列表（转）

    转载自:http://www.cnblogs.com/graphics/archive/2010/07/04/1770900.html 何谓初始化列表 与其他函数不同,构造函数除了有名字,参数列表和函 ...

  3. 数据库连接池（c3p0）

    (一)问题的提出: 在使用开发基于数据库的web程序时,传统的数据库使用模式按照以下步骤: 在程序中建立数据库连接 进行sql操作 断开数据库连接 但是,这种模式存在着移动的问题: 传统连接模式每次向 ...

  4. javascript如何自动去除所有空格？

    1.jquery自带了trim方法:    $.trim(" abc ") // abc 2.自己写方法: function trim(str) { return str.repl ...

  5. html input验证只能输入数字，不能输入其他

    html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...

  6. 关于mybatis 注解sql sum（参数）传参写法

    新手出道 验证了很久sum()里面带参数方式 #{参数}一直不行日志显示参数已经传进 但就是加不上去 返回的始终是0 后面换成$(参数)之后就行了 @Select("select sum($ ...

  7. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  8. RAC和单节点数据库的区别有哪些？RAC最有用的功能是什么?

    区别 (1)RAC有2个以上的实例,单节点只有1个实例 (2)RAC具有实例级别的高可用 (3)实例与实例之间通过内联网络交换数据,单节点不可 (4)RAC每个节点都有自己套SGA.后台进程.redo ...

  9. linux 动态库的符号冲突问题

    最近,给同事定位了一个符号表的冲突问题,简单记录一下. A代码作为静态链接库,被包含进了B代码,然后编译成了动态链接库,B.so A代码同时作为静态链接库,被编译进入了main的主代码. main函数 ...

  10. maven系列--maven常用命令

    下一篇博客我会讲解用eclipse的m2插件来使用maven,这里先大概的了解下maven常用的命令.之后我在详细整理maven的生命周期,到时候会细致的讲解下这些指令应该要怎么使,maven都帮我们 ...