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. asp.net三层架构详解(转)

    摘自:http://www.cnblogs.com/cresuccess/archive/2008/12/10/1351675.html 一.数据库             ,)   )     no ...

  2. Python 绘图库的使用:matplotlib

    Matplotlib 官方API地址:https://matplotlib.org/ 例子: import matplotlib.pyplot as plt num_list=[1.5,0.6,7.8 ...

  3. Java Jersey2使用总结

    原文  http://blog.segmentfault.com/lenbo_ma/1190000000495321 主题 Java 前言 在短信平台一期工作中,为便于移动平台的开发,使用了Java ...

  4. 【js】typeof与instanceof

    typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typeof[()expression[]] ; expression 参数是需要查找类型信息的任意表达式. 说明 typeof 运算 ...

  5. jmeter --- 基于InfluxDB&Grafana的JMeter实时性能测试数据的监控和展示

    转自:https://blog.csdn.net/RickyOne_RR/article/details/50637839 本文主要讲述如何利用JMeter监听器Backend Listener,配合 ...

  6. Unix环境高级编程(一)文件I/O

    Unix系统中大多数文件I/O只需用到五个函数:open.read.write.lseek.close.本章说介绍的I/O是不带缓冲的,即:每个read和write都调用内核中的一个系统调用.不是IS ...

  7. AVL平衡二叉搜索树原理及各项操作编程实现

    C语言版 #include<stdio.h> #include "fatal.h" struct AvlNode; typedef struct AvlNode *Po ...

  8. Linux时间子系统(十四) tick broadcast framework

    一.前言 在内核中,有cpuidle framework可以控制cpu的节电:当没有进程调度到该cpu上执行的时候,swapper进程粉墨登场,将该cpu会被推入到idle状态.当然CPU的idle状 ...

  9. Bitmap具体解释与Bitmap的内存优化

    感觉这里的排版看着更舒服些 Bitmap具体解释与Bitmap的内存优化 一.Bitmap: Bitmap是Android系统中的图像处理的最重要类之中的一个.用它能够获取图像文件信息,进行图像剪切. ...

  10. Linux 批量建立信任关系,实现ssh无password登陆的脚本

    作用: 把当前机器的ssh公钥拷贝到其它机器.以实现从当前机器能够ssh无password登陆到其它机器 用法: 1)把要加入的ip地址写入到一个文件里.比方host 2)把脚本保存为sh文件,如 i ...