啥也不说了,直接上代码

    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. Python -- 多媒体编程 -- 音乐播放

    使用win32库的WMPlayer.OCX开发一个简易的音乐播放器 import sys from PyQt4 import QtGui, QtCore from win32com.client im ...

  2. Hibernate的Api以及三种查询方式

    Hibernate  Api |-- Configuration       配置管理类对象 config.configure();    加载主配置文件的方法(hibernate.cfg.xml) ...

  3. Linux系列：Ubuntu/fedora实用小技巧—禁止自动锁屏、设置免密码自动登录、免密码执行sudo操作

    首先声明:该文虽以Ubuntu 13.04为例,同样适用于Fedora 17(已测试),但在较低版本的Ubuntu下可能有所差异,具体看后面的注意事项. 技巧目录: 解决Ubuntu下每隔几分钟自动锁 ...

  4. SpringCloud入门之Maven系统安装及配置

    一.Maven 介绍 这个单词中文翻译为“专家”或“内行”.下面将向你介绍 Maven这一跨平台的项目管理工具.作为 Apache 组织中的一个成功的开源项目,Maven 主要服务于基 Java 平台 ...

  5. 谈谈AsmJit

    0x01  基本介绍 AsmJit是一个完整的JIT(just In Time, 运行时刻)的针对C++语言的汇编器,可以生成兼容x86和x64架构的原生代码,不仅支持整个x86/x64的指令集(包括 ...

  6. study design of ADNI

    AD(Alzheimer’s disease):不可逆的神经退化,患病人员会由于脑部问题的恶化而导致心智功能不健全. ADNI:阿尔茨海默氏症神经成像项目 ADNI的总体目标是验证用于阿尔茨海默病临床 ...

  7. html+ashx制作网页发布之后遇到的问题

    html+ashx发布之后访问不了ashx文件.(开发时一直是对的) .NETFramework开发时是4.5,服务器上的网站是2.0的. 开始意识到这个问题,发布时选择4.5的Framework.之 ...

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

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

  9. LINQ 图解 LINQ学习第三篇

    LINQ,语言集成查询(Language INtegrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...

  10. Razor 中的@rendersection

    在使用布局页时,可以指定页面中某处的渲染,具体的用@rendersection来做.如在布局页中要渲染一段自定义的脚本, @RenderSection("scripts", req ...