上代码：

<!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. PHP安全之webshell和后门检测

    基于PHP的应用面临着各种各样的攻击: XSS:对PHP的Web应用而言,跨站脚本是一个易受攻击的点.攻击者可以利用它盗取用户信息.你可以配置Apache,或是写更安全的PHP代码(验证所有用户输入) ...

  2. 遍历Map集合：java.util.Map.Entry、KeySet两种方式

    遍历Map集合的两种方式: 1.用KeySet Map.keySet(),返回一个存放所有key的set集合,通过遍历集合,根据key值取出所有的value值. Map<String,Strin ...

  3. Spring MVC 学习总结（一）——MVC概要与环境配置 转载自【张果】博客

    Spring MVC 学习总结(一)--MVC概要与环境配置   目录 一.MVC概要 二.Spring MVC介绍 三.第一个Spring MVC 项目:Hello World 3.1.通过Mave ...

  4. RxJava整合Retrofit遇到的问题总结

    一:初上手(填坑) Observable将事件序列执行完毕后,会回调Observe的onNext()方法和onCompleted()方法,当出现异常/错误时会调用onError()方法. 由此,我们推 ...

  5. Tomcat配置虚拟路径访问容器外的硬盘资源

    问题: 如果tomcat中上传了很多的图片,会导致tomcat启动的时候会慢,所以应该把图片上传到tomcat容器外部 那么,问题来了: tomcat出于安全考虑,禁止了直接访问外部硬盘资源. 解决: ...

  6. 手把手教你搭建 vue 环境

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  7. speex库音频降噪(含代码)

    speex库中音频降噪效果不错,应该是应用最广泛的吧,speex库下载地址https://www.speex.org/downloads/,可以直接下载二进制代码使用,像配置OpenCV一样配置spe ...

  8. ObjectiveC 深浅拷贝学习

    在ObjC中,什么是深浅拷贝? 深浅拷贝分别指深拷贝和浅拷贝,即mutableCopy和copy方法. copy复制一个不可变对象,而mutableCopy复制一个mutable可变对象. 什么时候用 ...

  9. Angular 4 设置组件样式的几种方式

      你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置:   图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样 ...

  10. git 文件状态与工作区域

    在上一篇简单讲述了文件状态与工作区域,在这里结合相关git命令详细了解文件的状态变更. 目录 1. 介绍 2. 常用命令 3. 实际操作 1. 介绍 git的文件状态是其git核心内容,了解后对后续的 ...