啥也不说了,直接上代码

    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. VS和Eclipse的调试功能哪个更强大？

    以前一直用VS 2012来调试C/C++代码,F5.F10.F11用起来甚是顺手,前面也写过一篇关于VS最好用的快捷键:Visual Studio最好用的快捷键(你最喜欢哪个), 所以对于调试C/C+ ...

  2. php的 $_REQUEST取值为空

    默认的 $_REQUEST 会获取 $_POST, $_GET, $_COOKIE的数据,这些可以通过查看 php.ini来确认: 由上图可以看出,获取的内容是通过 variables_order 和 ...

  3. JavaScript对象Object

    <script> var obj = new Object(); var obj2 = {}; obj2.firstName = "wang"; obj2.lastNa ...

  4. JavaScript 片段

    js split 的用法和定义 js split分割字符串成数组的实例代码 <script language="javascript"> str="2,2,3 ...

  5. SingleThreadExecutor（单线程执行器）

    前要:一般的执行器会为每个任务单独创建线程,起码是分配单独的线程,即每个任务有其自己的线程.这样可以让任务并发执行.   问题:既然这样,为什么只用一个线程处理多个任务呢?     如果是这样,那一个 ...

  6. Solr 访问 403 错误

    把 Solr 基础环境搭建好后访问发现会出现 403 错误: 解决方法: 找到自己 Tomcat 目录下的 solr ,找到  ...\solr\WEB-INF\web.xml,然后把 169 - 1 ...

  7. MySQL升5.6引发的问题

    昨天项目MySQL数据库从5.5升级到5.6,导致部分表无法进行更新操作,报如下错误: When @@GLOBAL.ENFORCE_GTID_CONSISTENCY = , updates to no ...

  8. Redis-发布与订阅

    发布与订阅(pub/sub)的特点是订阅者负责订阅频道发送者负责向频道发送二进制字符串消息.每当有消息发送至给定频道时,频道的所有订阅者都会收到消息 (发布和订阅命令) SUBSCRIBE : SUB ...

  9. Go语言封装Http协议GET和POST请求

    本文几乎没有文字叙述: /* 有关Http协议GET和POST请求的封装 */ package net import ( "net/http" "io" &qu ...

  10. Java基础——TreeSet

    TreeSet是SortedSet接口的实现类,Sorted的英文意思是分类的:选择的. TreeSet可以确保集合元素处于排序状态.与HashSet集合相比,TreeSet还提供了如下几个额外方法: ...