vue-totop

vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等。github地址:https://github.com/1006008051/vue-totop,欢迎star。

安装
npm install vue-totop -S

使用
注入

// ES6
import vueToTop from 'vue-totop'
//or require
var vueToTop = require('vue-totop')

Vue.use(vueToTop)

组件使用

<vueToTop></vueToTop>

参数

参数 说明  类型 可选值  默认值
type 按钮的类型,一共16种 number   0~15 0
top  滚动条离顶部多高时,显示返回顶部按钮 number  大于0的整数 400
right  按钮右部定位位置  number  大于0的整数 30
bottom  按钮底部定位位置 number  大于0的整数 30
size  按钮大小  number  大于0的整数  24
color   按钮颜色 string string   rgb/hex ‘#666’
duration  返回顶部的间隔时间 number 大于0的整数 300

vue点击返回顶部插件vue-totop的更多相关文章

  1. jQuery-点击返回顶部

    在页面上,有时需要点击某个图标钮实现返回顶部的效果. 实现方式如下,给图标按钮增加名叫goTop-hook的类. // 点击返回顶部 $(window).scroll(function() { if ...

  2. js中点击返回顶部

    window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }

  3. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  4. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  5. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  6. 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue工程化:返回顶部和底部的动画效果

    . <template> <div> <div class="scroll" :class="{show:isActive}"&g ...

  8. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  9. jqury点击返回顶部代码

    效果请看右下角:代码如下: <div class="totop"><img src="https://www.cnblogs.com/images/cn ...

随机推荐

  1. kafka具体解释一、Kafka简单介绍

    背景:      当今社会各种应用系统诸如商业.社交.搜索.浏览等像信息工厂一样不断的生产出各种信息,在大数据时代,我们面临例如以下几个挑战: 怎样收集这些巨大的信息 怎样分析它 怎样及时做到如上两点 ...

  2. word使用宏定义来统一设置图片大小

    1. 首先手动拖拽将图片调到需要的格式,点击图片在格式选项中查看图片的宽高 2. 视图中点击宏新建 3. 编辑框中输入以下代码并保存,由于我只需要统一宽度,所以将统一高度的代码注释 Sub 图片格式统 ...

  3. Linux下su与su -命令的本质区别

    大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户.Linux中切换用户的命令是su或su -.前天我在使用us ...

  4. python学习笔记——信号模块signal

    基于python学习笔记——多进程间通信——Linux信号基础的学习基础,进一步学习Python标准库中的signal模块. 尽管signal是python中的模块,但是主要针对UNIX平台(比如Li ...

  5. Linux内核同步 - RCU synchronize原理分析

    RCU(Read-Copy Update)是Linux内核比较成熟的新型读写锁,具有较高的读写并发性能,常常用在需要互斥的性能关键路径.在kernel中,rcu有tiny rcu和tree rcu两种 ...

  6. Unix环境高级编程(五)进程环境

    本章主要介绍了Unix进程环境,包含main函数是如何被调用的,命令行参数如何传递,存储方式布局,分配存储空间,环境变量,进程终止方法,全局跳转longjmp和setjmp函数及进程的资源限制. ma ...

  7. Linux内核中锁机制之RCU、大内核锁

    在上篇博文中笔者分析了关于完成量和互斥量的使用以及一些经典的问题,下面笔者将在本篇博文中重点分析有关RCU机制的相关内容以及介绍目前已被淘汰出内核的大内核锁(BKL).文章的最后对<大话Linu ...

  8. SonarQube4.4+Jenkins进行代码检查实例之三-单元測试分析

    作者:张克强    作者微博:张克强-敏捷307 在 <SonarQube4.4+Jenkins进行代码检查实例之中的一个> 中介绍了不编译仅仅检查的方式. 在<SonarQube4 ...

  9. Java和C++通过Socket通信中文乱码的解决

    理想的开发状态是我开始就是C开发,一直是C的开发,现在还是C的开发,若干年后,幸运的话,我可以成为C语言的高手或者专家…… 更实际的情况是我开始是C开发,后来变成了JAVA开发,然后又做起了VC++的 ...

  10. Spring注解 强大了个强大--详解注解方式

    好文章:http://tonyaction.blog.51cto.com/227462/83874/ http://www.ibm.com/developerworks/cn/java/j-lo-sp ...