啥也不说了,直接上代码

    var scrollTop = document.body.scrollTop;

    document.body.style.marginTop = -scrollTop + 'px';

    document.body.scrollTop = 0;

    document.body.style.transition = 'all 1s ease-in-out';

    document.body.style.marginTop = 0;

    setTimeout(function () { document.body.style.transition = 'none'; }, 1000);

需要的请随意拿走....

纯js实现页面返回顶部的动画的更多相关文章

  1. 关于 ionic3 tabs 导航ico 点击 页面返回顶部

    类似微信 双击 页面返回顶部功能,ionic3 中有一个 Content. 将 import { Content } from 'ionic-angular'; 放入想要实现此功能的 ts中. 实例化 ...

  2. jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...

  3. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  4. 纯JS单页面赛车游戏代码分享

    分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...

  5. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  6. js中点击返回顶部

    window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }

  7. js 点击 返回顶部 动画

    附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片  但是我在评论区把js代码又复制了一边 以便你们使用

  8. JS实现页面回到顶部效果

    [代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. js实现页面锚点定位动画滚动

    项目上需要的效果,个人不想用jquery实现,想着用js自己试试,花了点儿时间,终于实现.. 上干货.. function scrollTo(y, duration) { /*y:目标纵坐标,dura ...

随机推荐

  1. 获取Javascript 滚动条距离顶部的距离（兼容IE6+，火狐，谷歌，其它没测）

    document.body.scrollTop || document.documentElement.scrollTop

  2. JavaScript -- Document-open

    -----045-Document-open.html----- <!DOCTYPE html> <html> <head> <meta http-equiv ...

  3. 06 - JavaSE之常用类

    String类 String 类是不可变的字符序列,String 字符串一旦分配好就不能改变其内容和长度了.(如果使用 s1+=s2; 并不是在s1的后面开辟空间将s2拷贝其内,而是另外开辟一个空间, ...

  4. JDK7 异常的多重捕获

    Java 7之前的版本: 1 2 3 4 5 6 7 8 9 10 catch (IOException ex) {      logger.error(ex);      throw new MyE ...

  5. Async异步编程入门示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 如何优雅的控制goroutine的数量

    1,为什么要控制goroutine的数量? goroutine固然好,但是数量太多了,往往会带来很多麻烦,比如耗尽系统资源导致程序崩溃,或者CPU使用率过高导致系统忙不过来.比如: ; i < ...

  7. spring@value取不到值的几种情况

    一,spring组件重写构造方法,在构造方法中引用@value为null 由于spring实例化顺序为先执行构造方法,再注入成员变量,所以序为先执行构造方法,再注入成员变量,所以ing实例化顺取值为n ...

  8. Linux下的压缩文件剖析 （tar/gzip的区别）

    Linux下的压缩文件剖析 对于刚刚接触Linux的人来说,一定会给Linux下一大堆各式各样的文件名给搞晕.别个不说,单单就压缩文件为例,我们知道在Windows下最常见的压缩文件就只有两种,一是, ...

  9. 常用的7个SQl优化技巧

    作为程序员经常和数据库打交道的时候还是非常频繁的,掌握住一些Sql的优化技巧还是非常有必要的.下面列出一些常用的SQl优化技巧,感兴趣的朋友可以了解一下. 1.注意通配符中Like的使用 以下写法会造 ...

  10. winform窗体 种类、普遍常用的【属性】

    窗体种类: + 记事本类型 + 计算器类型 + 无边框类型 + 不规则类型 + 置顶类型   布局   Size                    --  控件的大小 AutoScroll     ...