附上效果图

触发前

触发后

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. [HDU5663]Hillan and the girl

    题面戳我(题面很鬼畜建议阅读一下) 题意:给出n,m,求 \[\sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j)\mbox{不是完全平方数}]\] 多组数据,\(n,m\le1 ...

  2. [SDOI2015]约数个数和

    Sol 首先有个结论 \(\sum_{i=1}^{m}\sum_{j=1}^{n}d(i*j)=\sum_{i=1}^{m}\sum_{j=1}^{n}\sum_{x|i}\sum_{y|i}[gcd ...

  3. [BZOJ3224] [Tyvj 1728] 普通平衡树 (treap)

    Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 1. 插入x数 2. 删除x数(若有多个相同的数,因只删除一个) 3. 查询x数的排名(若有多个相 ...

  4. javascript 推箱子游戏介绍及问题

    最近没什么事情,我的一个亲戚在学校学习PHP,课程中老师让他们编写一个javascript版本的推箱子小游戏,他没什么头绪,就来问我,我当时很闲,就随口答应他包在我身上.结果真正写的时候还是花了点时间 ...

  5. C# 程序之间传参数，Args 接收参数的处理

    备忘,或者留给暂未接触但需要了解的人. C#在一个进程内传参数方法那是相当多,但是涉及到程序之间传参数就不是那么方便了(当然socket,内存共享等方式属于另一类,此处不讨论),我们的C或者C#,亦或 ...

  6. Web前端有价值的博客文章汇总

    一.HTML 二.CSS 1.深入理解position和z-index属性 :https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 2.BFC(清除 ...

  7. 2D变形transform的translate和rotate

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 3.2.2 break 与 continue 语句

    break 语句和 continue语句在while循环和for循环中都可以使用,并且一般常与选择结构结合使用.一旦break语句被执行,将使得break语句所属层次的循环提前结束.continue语 ...

  9. Java中常见数据结构Map之LinkedHashMap

    前面已经说完了HashMap, 接着来说下LinkedHashMap. 看到Linked就知道它是有序的Map,即插入顺序和取出顺序是一致的, 究竟是怎样做到的呢? 下面就一窥源码吧. 1, Link ...

  10. C# 发送手机短信

    由于使用 收费 第三方 屏蔽   可能有 免费 第三方. private const string Cdkey = "8S*********************";密钥id p ...