附上效果图

触发前

触发后

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. HiHocoder1419 : 后缀数组四·重复旋律4&[SPOJ]REPEATS：Repeats

    题面 Hihocoder Vjudge Sol 题目的提示说的也非常好 我对求\(LCP(P - L + len \% l, P + len \% L)\)做补充 \(len=LCP(P, P + L ...

  2. 服务器安装centos

    谈一下今天遇到的problem,虽然很基础,但是还是值得记录一下: 1.制作启动盘,并不需要使用UltralISO刻录,可以通过在linux下dd命令直接制作iso镜像启动盘下面是步骤: 1)打开终端 ...

  3. mariadb 压缩包gz安装方式

    1.解压安装包tar -zxvf mariadb-5.5.56-linux-x86_64.tar.gz 2.cd support-filescp my-small.cnf /etc/my.cnf 2. ...

  4. 无需安装Oracle Client连接Oracle数据库

    介绍 当我们采用 ODP.NET 检索Oracle 数据库的时候,Oracle客户端是必须安装.假如当时电脑上没有安装Oracle客户端,就不能这么用了,这时候Oracle.ManagedDataAc ...

  5. WordPress制作圆形头像友情链接页面的方法

    网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...

  6. jmockito模拟方法中参数如何指定

    在做单元测试的时候,经常会遇到mock类的方法的情景.在写单测过程中,遇到一些问题,比较困惑,便做了一些测试,并得出一个结论: 在mock类的方法时,当符合 (mock参数).equals(实际调用过 ...

  7. IPFS：世界正在悄然发生变化

    世界正在悄然发生变化(IPFS) 2015-05-05 Juan Benet 在自己的终端里面敲入了下面的文字: > echo "hello worlds" | ipfs a ...

  8. curl/libcurl获取打开网页平均网速

    CURL: curl -o /dev/null -s -w %{http_code}:%{http_connect}:%{content_type}:%{time_namelookup}:%{time ...

  9. Java 泛型进阶

    擦除 在泛型代码内部,无法获得任何有关泛型参数类型的信息. 例子1: //这个例子表明编译过程中并没有根据参数生成新的类型 public class Main2 { public static voi ...

  10. MySQL数据库学习一 数据库概述

    1.1 数据库管理技术的发展阶段 人工管理阶段,文件系统阶段,数据库系统阶段. 1.2 数据库系统阶段涉及的概念 数据库(Database DB):是指长期保存在计算机的存储设备上,按照一定的规则组织 ...