啥也不说了,直接上代码

    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. 02 - JavaSE之基础及面向对象（补充）

    引用数据类型 java中的数据类型可以分为 基本数据类型 和 引用数据类型 两大类 int float char boolean等都是基本数据类型 类类型都是引用数据类型 引用数据类型类似C语言中的指 ...

  2. Vue笔记：使用 Yarn 管理依赖包

    上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快.更高效. Yarn VS npm 1.yarn.lock 文件 在 npm 中同样 ...

  3. mysql通信协议的半双工机制理解

    一.通信知识中的半双工概念 通信的方式分为:单工通信,半双工,全双工. 全双工的典型例子是:打电话.电话在接到声音的同时也会传递声音.在一个时刻,线路上允许两个方向上的数据传输.网卡也是双工模式.在接 ...

  4. C#中将String类型保存到本地文件的方法

    今天刚刚遇到,要在WinForm中把一个xml保存到本地, 由于之前是学习java的,一时间还真不知道怎么写, 没想到C#居然那么方便,就3句代码就实现了我要的功能: StreamWriter sw ...

  5. Tomcat学习总结（2）——Tomcat使用详解

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...

  6. bootstrap 通过js代码创建和关闭插件

    插件的创建机制 默认情况下,boostrap.js文件被页面加载执行完成后,boostrap会自动根据html元素的data-toggle属性和相关class创建插件对象.有时候,我们不希望boost ...

  7. MyBatis原理第四篇——statementHandler对象（sqlSession内部核心实现，插件的基础）

    首先约定文中将的四大对象是指:executor, statementHandler,parameterHandler,resultHandler对象.(为了方便下面的文章说道四大对象就专指它们) 讲到 ...

  8. 使用 ReentrantLock 和 Condition 实现一个阻塞队列

    前言 从之前的阻塞队列的源码分析中,我们知道,JDK 中的阻塞队列是使用 ReentrantLock 和 Condition 实现了,我们今天来个简易版的.代码如下: 代码 public class ...

  9. [日常] Linux下vim的常用命令总结

    vim按d表示剪切按dd剪切一行vim命令:命令模式 /关键字 n继续向下查找 vim的多行注释:1.按ctrl + v进入 visual block模式2.按上下选中要注释的行3.按大写字母I,再插 ...

  10. Weex 学习文档、跳转路径、控制台输出、we转js汇总

    最近在学习阿里的weex框架,网上教程真是不少,但是有用的确实是少的很.其中大多数都是讲如何配置移动端的,很少有讲到weex语法的.要知道,如果真需要用weex编写js页面的话,很有可能是移动端开发者 ...