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. 【mysql+RBAC】RBAC权限处理(转载:http://www.cnblogs.com/xiaoxi/p/5889486.html 平凡希)

    1.这里我只讲核心,mysql查询语句:FIND_IN_SET(str,strlist) 2.具体教程可以参考[童攀老师的RBAC],很清晰,赞一个. 3.详解:mysql的find_in_set 首 ...

  2. 初学HTML一些基本控件语句

    <html> <head> <title> 这是网页的标题</title> </head> <body> <h2>& ...

  3. HDUOJ-4104 Discount

    Discount Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  4. 转 python 读取中文文件名/中文路径

    python直接读取中文路径的文件时失败,可做如下处理: inpath = 'D:/work/yuanxx/在线导航/驾车导航/walk_log/20130619_172355.txt' uipath ...

  5. 安卓解析 json 4种格式 全解析

    总共4种json  ,    还提供了 httclient  和 httpurlconnection 2种方式获取json的方法(请把baseurl 改为可以地址比如http://www.sohu.c ...

  6. Linux内核(5) - 内核学习的相关资源

    “世界上最缺的不是金钱,而是资源.”当我在一份报纸上看到这句大大标题时,我的第一反应是——作者一定是个自然环保主义者,然后我在羞愧得反省自身的同时油然生出一股对这样的无产主义理想者无比崇敬的情绪来. ...

  7. Linux Shell之表达式

    严格来说,shell中没有表达式的概念.Shell本身事实上仅仅是一堆命令的集合.当然也不是胡乱的堆在一起.而是有一定的组织.仅仅是这个组织不那么严谨.所以本文不是要真的总结所谓的表达式,而是把she ...

  8. 江南白衣 Java性能优化PPT

    会后江南白衣花费数日整理PPT,到1.4版本共66页,内容翔实且旁征博引,不断校正且力求做到极致的匠艺精神值得尊敬! 技术大牛飒然Hang如是说到: “技术大神中,除了陈皓就是白衣了,四十岁还能钻研. ...

  9. python标准库介绍——19 mmap 模块详解

    ==mmap 模块== (2.0 新增) ``mmap`` 模块提供了操作系统内存映射函数的接口, 如 [Example 2-13 #eg-2-13] 所示. 映射区域的行为和字符串对象类似, 但数据 ...

  10. JavaScript经常使用对象

    常见的几种对象及其属性和使用方法: (1).Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); ...