附上效果图

触发前

触发后

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. tree、find、tail命令重要实战

    tree -L 1 -d ln -s ext msn  创建软连接 ls -lF| sed -n‘/^d/p’ ls -lF|awk ‘/^d’ ls -lrt  按时间倒着排 vi /etc/pro ...

  2. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十一)

    前言 小伙伴们, 大家好,我是Rector. 最近Rector忙于换工作,没有太多时间来更新我们的ASP.NET MVC 5系列文章 [一步一步创建ASP.NET MVC5程序Repository+A ...

  3. Android 音视频编解码——RGB与YUV格式转换

    一．RGB模型与YUV模型 1.RGB模型 我们知道物理三基色分别是红(Red).绿(Green).蓝(Blue).现代的显示器技术就是通过组合不同强度的红绿蓝三原色,来达成几乎任何一种可见光的颜色. ...

  4. Java仪器数据文件解析-PDF文件

    一.概述 使用pdfbox可生成Pdf文件,同样可以解析PDF文本内容. pdfbox链接:https://pdfbox.apache.org/ 二.PDF文本内容解析 File file = new ...

  5. 【翻译】《向“弹跳球”演示程序添加新功能》 in MDN

    文章地址: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/%E5%90%91%E2%80%9C%E5%BC%B9% ...

  6. c++中回调函数和函数指针的使用

    #include "stdafx.h" #include <iostream> //#include <string> using namespace st ...

  7. 在Simplicity Studio下创建适用于EFR32的工程项目

    1.使用平台 使用平台描述了在Simplicity Stdio下创建工程时所使用的操作系统与软件版本等. 操作系统:Windows 10 Simplcity Studio版本:Simlicity St ...

  8. Js基本函数 2017-03-20

    自定义函数:  Var  y = xxx (参数) xxx. yyy():表示引用这个类的方法:如document.write() xxx.yyy: 表示引用这个类的属性: 如:atrr.lenth ...

  9. Shiro【授权过滤器、与ehcache整合、验证码、记住我】

    前言 本文主要讲解的知识点有以下: Shiro授权过滤器使用 Shiro缓存 与Ehcache整合 Shiro应用->实现验证码功能 记住我功能 一.授权过滤器测试 我们的授权过滤器使用的是pe ...

  10. Django+xadmin打造在线教育平台（三）

    五.完成注册.找回密码和激活验证码功能 5.1.用户注册 register.html拷贝到templates目录 (1)users/views.py class RegisterView(View): ...