附上效果图

触发前

触发后

HTML代码：

CSS代码

JS代码

由于复制文本太丑了 所以直接放的图片  但是我在评论区把js代码又复制了一边 以便你们使用

js 点击 返回顶部 动画的更多相关文章

  1. js中点击返回顶部

    window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }

  2. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  3. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  4. jQuery-点击返回顶部

    在页面上,有时需要点击某个图标钮实现返回顶部的效果. 实现方式如下,给图标按钮增加名叫goTop-hook的类. // 点击返回顶部 $(window).scroll(function() { if ...

  5. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  6. chrome浏览器页面获取绑定返回顶部动画事件插件

    在chrome浏览器下页面加载: var top = $("body").scrollTop()  ; console.log(top)                      ...

  7. 在页面中有overflow-y:auto属性的div,当出现滚动条，点击返回顶部按钮，内容回这个div最顶部

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 纯js实现页面返回顶部的动画

    啥也不说了,直接上代码 var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'p ...

  9. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

随机推荐

  1. [POI2014]HOT-Hotels

    题目描述 There are towns in Byteotia, connected with only roads. Each road directly links two towns. All ...

  2. [USACO07NOV]Cow Relays

    map+floyed+矩阵乘法(倍增floyed) # include <stdio.h> # include <stdlib.h> # include <iostrea ...

  3. [BZOJ1002] [FJOI2007] 轮状病毒 (数学)

    Description 给定n(N<=100),编程计算有多少个不同的n轮状病毒. Input 第一行有1个正整数n. Output 将编程计算出的不同的n轮状病毒数输出 Sample Inpu ...

  4. Qt 创建一个QtDesinger第三方控件

    1.需要创建一个合适的.pro文件 2.创建一个继承QDesignerCustomWidgetInterface的类,描述控件的一些属性. 函数 描述和返回值 name() 指定控件的名称 group ...

  5. 关于各种文件用Editplus的方式打开出现“向程序发送命令时出现问题”的解决方法

    其实网上有很多解决方法,但是我试过都没有用. 我出现这个错误的原因是因为我的Editplus是以管理员的方式运行的,所以解决的办法有两种: 一.修改Editplus的兼容性,方法如下: 首先在Edit ...

  6. Asp.Net MVC 实现将Easy-UI展示数据下载为Excel 文件

    在一个项目中,需要做一个将Easy-UI界面展示数据下载为Excel文件的功能,经过一段时间努力,完成了一个小Demo.界面如下: 但按下导出Excel后,Excel文件将会下载到本地,在office ...

  7. 【OpenCV-Python：实现人脸、人眼、嘴巴识别】实战（一）

    AI时代的到来,手机上的APP开始应用人脸识别去完成事情,如iphoneX的人脸解锁,百度自动贩卖机的人脸识别系统进行支付,支付宝的人脸识别登录等,提高了使用软件的易用性,但也因为其便利性,在某些市面 ...

  8. 黄金K线理论简述

    黄金K线理论简述 [Ⅰ]． 隐藏在K线背后的多空搏杀 黄金K线的多空搏杀理论,说到底,其核心就是研判K线时,必须从多空搏杀的角度去认知,否则仅仅从表面到表面,是无法掌握K线精髓的.具体来说,多方和空方 ...

  9. 关于ASP.NET MVC的js和css资源管理

    本文来源于博客园-钱智慧,转载请注明出处 通过这篇文章和这个回答,我们总结如下: 浏览器针对一个域名,最多只会开启6个线程来加载文件,比如head中如果有7个引入文件(js文件或者css文件)的标签, ...

  10. eclipse异常解决:Errors occurred during the build.........

    在MyEclipse下编辑文件保存时,编译java工程,出现以下弹出提示.每次保存都会弹出,不堪其扰. "Errors occurred during the build.......... ...