附上效果图

触发前

触发后

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. [CQOI2015]任务查询系统

    把一个任务拆成两个,在s时加入,在e+1时减去即可 直接离散化后上主席树 # include <bits/stdc++.h> # define IL inline # define RG ...

  2. Django的models实现分析

    1      引子 1.1     神奇的Django中的models 我们先来看一段在Django项目中常用的代码: 设置数据库models代码: class Students(models.Mod ...

  3. canvas练手项目（二）——各种操作基础

    想想应该在canvas上面作画了,那么就不得不提到事件了. (打着canvas的旗号,写着mouse事件.挂羊头卖狗肉!哈哈哈哈哈~) 先来看一看HTML事件属性,我们要用的就是Mouse事件,就先研 ...

  4. java多线程的常见例子

    收藏 http://blog.csdn.net/wenzhi20102321/article/details/52524545

  5. FJUT16级第一周寒假作业题解D题

    题目链接:http://210.34.193.66:8080/vj/Contest.jsp?cid=160#P3 第八集,体能训练 TimeLimit:1000MS  MemoryLimit:128M ...

  6. Lintcode245 Subtree solution 题解

    [题目描述] You have two every large binary trees:T1, with millions of nodes, and T2, with hundreds of no ...

  7. BZOJ1565 植物大战僵尸 题解

    题目内容: 题目分析:有选A则必须选B这样的限制条件,可以发现这是最大权闭合子图模型,考虑环的情况,可以推测需要拓扑判环. 代码: #include<bits/stdc++.h> usin ...

  8. vue零基础学习--搭建项目

    一.script引入(联系使用,小型项目) 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. <script src="https://cdn.j ...

  9. Spring OAuth2 GitHub 自定义登录信息

    # 原因 最近在做一款管理金钱的网站进行自娱自乐,发现没有安全控制岂不是大家都知道我的工资了(一脸黑线)? 最近公司也在搞 Spring OAuth2,当时我没有时间(其实那时候不想搞)就没做,现在回 ...

  10. linux学习之路－－（四）文件，目录管理

    1.mkdir:创建空目录 -p: -v:verbose mkdir -pv /mnt/test/x/m  /mnt/test/y mkdir -pv /mnt/test/{x/m,y} 命令行展开: ...