啥也不说了,直接上代码

    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. php -- 获取函数参数

    ----- 015-parameter.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...

  2. 解决tomcat使用时catalina.out过大的问题

    在项目上线之前需要做很多事情,其中最容易忘记的就是禁用不必要的日志和调整必要的参数. 调整参数这里主要指的是最大连接数,最小等待时间,虚拟机内存等. 而这里重点要提出的是,你需要禁用tomcat中不必 ...

  3. es-09-spark集成

    es和spark的集成比较简单, 直接使用内部封装的一些方法即可 版本设置说明: https://www.elastic.co/guide/en/elasticsearch/hadoop/curren ...

  4. 如何替代即将淘汰的Flash方案？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由MarsBoy发表于云+社区专栏 | 导语 Web技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问题: ...

  5. json.stringify()的妙用，json.stringify()与json.parse()的区别

    一.JSON.stringify()与JSON.parse()的区别 最近做项目,发现JSON.stringify()使用场景真的挺多,我们都知道JSON.stringify()的作用是将 JavaS ...

  6. [转]Reporting Services 中的身份验证类型

    本文转自:https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2008/cc281310%28v%3dsql.100%2 ...

  7. Vistual Studio 2010(VS2010)安装 MVC3.0具体方法

    本文内容部分摘自园子里其他博主的内容,感谢他们的探索和分享,谢谢!本文主要方便自己记录自己的学习和操作过程,同时也希望能够通过搜索引擎通过不同的关键字分享该文章,以方便更多的同学. PS:VS2010 ...

  8. echart 数据视图 样式重写

    来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写 在echarts.js中,点击折线图的数据 ...

  9. .NET世界的包管理器——Nuget

    NugetServer 使用指南 为什么要使用Nuget 在我们的项目, 存在着一些公共Dll, 这些Dll被大量的项目所引用.同时这些公共dll也同时在进行版本升级, 由于缺乏版本管理,这些Dll会 ...

  10. Java集合类源码解析：LinkedHashMap

    前言 今天继续学习关于Map家族的另一个类 LinkedHashMap .先说明一下,LinkedHashMap 是继承于 HashMap 的,所以本文只针对 LinkedHashMap 的特性学习, ...