啥也不说了,直接上代码

    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. linux编译找不到aprt apr-util

    Linux很多地方编译的时候都会用到apr 如果找不到apr就会报错 configure: WARNING: APR not found The Apache Portable Runtime (AP ...

  2. JavaScript 总结（前端常用工具类的封装）

    JavaScript (class是ES6的新东西,看着不爽可以变,但主要还是里面的方法) 1. type 类型判断 class TypeFn { isString (o) { //是否字符串 ret ...

  3. ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（2）

    前言 本节先给大家搭建UI部分,让大家能看到点东西,就好像所有编程书里,开始都是一个Hello World一样 开始搭建 首先建立空白解决方案,我们命名为BYCMS 然后添加新项目BYCMS 我习惯用 ...

  4. [源码]underscore-1.8.3

    // Underscore.js 1.8.3 // http://underscorejs.org // (c) 2009-2015 Jeremy Ashkenas, DocumentCloud an ...

  5. .19-浅析webpack源码之compile流程-rules参数处理(2)

    第一步处理rule为字符串,直接返回一个包装类,很简单看注释就好了. test/include/exclude 然后处理test.include.exclude,如下: if (rule.test | ...

  6. b'driver "overlay" failed to remove root filesystem 的解决方法

    1.docker-compose启的nexus仓库意外dead   公司的maven私服nexus是通过docker-compose启动的,不知道什么原因意外死掉了.再次启动的时候报错: [root@ ...

  7. 启用sa账号

    第一部分: 如果在安装的时候选中的是Window身份验证,后来需要SQLServer身份验证登录,那么 一.先用window账号登录数据库 二.启用window身份验证和sql sever身份验证方式 ...

  8. Tomcat服务器的安装配置图文教程(推荐)

    现在将使用Tomcat的一些经验和心得写到这里,作为记录和备忘.如果有朋友看到,也请不吝赐教. 1.首先是Tomcat的获取和安装. 获取当然得上Apache的官方网站下载,开源免费,而且带宽也足够. ...

  9. 【ibatis】入门讲例

    Ⅰ .Ibatis项目机构 打开资源包,可以看到里面有一个simple_exzample的文件夹,在MyEclipse8.5中新建一个JAVA项目,将刚才的文件夹中内容复制到项目SRC下,这样的话呢, ...

  10. Web前端基础——CSS

    一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...