附上效果图

触发前

触发后

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. 【CJOJ2440】大话西游（树链剖分）

    题面 Description "大话西游" 是一个在中国非常流行的在线游戏, 由 NIE 公司开发和维护. 这个游戏来源于著名的小说<西游记> 和周星弛的电影, 游戏的 ...

  2. [BZOJ1036] [ZJOI2008] 树的统计Count (LCT)

    Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...

  3. Angular4---认证---使用HttpClient拦截器，解决循环依赖引用的问题

    在angular4 项目中,每次请求服务端需要添加头部信息AccessToken作为认证的凭据.但如果在每次调用服务端就要写代码添加一个头部信息,会变得很麻烦.可以使用angular4的HttpCli ...

  4. .net core实现redisClient

    引言 最近工作上有需要使用redis,于是便心血来潮打算自己写一个C#客户端.经过几天的努力,目前该客户端已经基本成型,下面简单介绍一下. 通信协议 要想自行实现redisClient,则必须先要了解 ...

  5. 所使用的“EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”版本高于所引用的程序集“EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”的版本

    错误信息:所使用的"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089&qu ...

  6. centos6.5的开机自动部署出现unsupported hardware detected

    author:headsen chen date : 2017-12-01  14:52:50  . notice:created by  headsen chen,if you copy or tr ...

  7. python爬微信公众号前10篇历史文章（2）-拼接URL&发送http请求

    如何拼接想要的url http://weixin.sogou.com/weixin?type=1&page=1&ie=utf8&query=%E5%A4%A7%E7%BA%BD ...

  8. java--补全诗句代码

    代码效果: 代码: import java.util.Scanner; /* 补全诗句 */ public class game1 { public static void main(String[] ...

  9. Batch update returned unexpected row count from update [0] 异常处理

    在one-to-many时遇到此异常,本以为是配置出错.在使用s标签开启debug模式,并在struts2主配置文件中添加异常映射,再次提交表单后得到以下异常详情. org.springframewo ...

  10. javap -c命令关键字的含义

    jdk提供了javap命令用于查看字节码来查看程序执行赋值的顺序,看懂这些关键字可以很好的理解程序执行的过程 转自:http://www.cnblogs.com/duanxz/archive/2014 ...