啥也不说了,直接上代码

    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. drools 的一个小demo

    直接上代码: 第一步,maven引入相关包 <?xml version="1.0" encoding="UTF-8"?> <project x ...

  2. jar包运行main程序

    当把java项目打包成jar后,如何运行main函数呢? 第一种:指定运行main类: 1 java -cp test.jar com.hk.app.Application 第二种:在MANIFEST ...

  3. Mybatis在非spring环境下配置文件中使用外部数据源（druidDatasource）

    Spring环境下, MyBatis可以通过其本身的增强mybatis-spring提供的org.mybatis.spring.SqlSessionFactoryBean来注入第三方DataSourc ...

  4. Java 使用pipeline对redis进行批量读写

    code import redis.clients.jedis.Jedis; import redis.clients.jedis.Pipeline; import java.util.List; p ...

  5. 浅谈移动应用的跨平台开发工具（Xamarin和React Native）

    谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...

  6. C++虚析构函数解析

    当派生类对象从内存中撤销时一般先运行派生类的析构函数,然后再调用基类的析构函数. 如果用new运算符建立的派生类的临时对象,对指向基类的指针指向这个临时对象当用delete运算符撤销对象时,系统执行的 ...

  7. CRC16位校验

    之前有跟第三方通讯合作,应为CRC表码问题导致校验出结果不一致,纠结了很久,最后直接采用CRC计算方式校验才解决. 两种方式贴,自行对比. CRC校验计算方法 private ushort CRC_1 ...

  8. 处理html内容，获取纯文本

    import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import java.util.rege ...

  9. C# 四舍五入 保留两位小数（转载）

    一.C#默认四舍五入 1 Math.Round(45.367,2) //Returns 45.372 Math.Round(45.365,2) //Returns 45.36二.C#中的Round() ...

  10. pdf.js 使用汇总

    https://www.cnblogs.com/iPing9/p/7154753.htmlhttp://blog.csdn.net/m0_38021128/article/details/708684 ...