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. 兼顾pc和移动端的textarea字数监控的实现方法

    概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...

  2. js的7个技巧

    http://www.vaikan.com/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

  3. highstock K线图 深入研究

    K线图,相信每个股民都不陌生,如何用SVG画好一个K线图是一个难题. 我选择用highstock做为画图组件,适当的修改了一下源码,参考了数个财经网站的案例,完成了一个不太成熟的K线图,欢迎大家批评指 ...

  4. WPF基础学习第一天

    格式 1.XAML格式: <Button x:Name="btnClick" Content="按钮" HorizontalAlignment=" ...

  5. java配置使用手册

    进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置: 1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是 ...

  6. 推荐系统之 BPR 算法及 Librec的BPR算法实现【1】

    [推荐系统之 BPR 算法] 1.关于BPR的论文原文: BPR: Bayesian Personalized Ranking from Implicit Feedback 2.参考1:论文快读 - ...

  7. web.csproj Compile 下出现两个同名 xxx.cs 项目中出现两个xxx.cs

    删掉一个就好了 ItemGroup Compile 为加载的cs代码文件

  8. LINUX使用DVD光盘或者ISO作为本地YUM源

    先把光盘或 ISO 文件挂载到文件系统: # mkdir /media/iso 挂载光盘: # mount /dev/cdrom /media/iso 或挂载 ISO 文件: mount -o loo ...

  9. 内存管理算法--Buddy伙伴算法【转】

    转自:http://blog.csdn.net/orange_os/article/details/7392986 Buddy算法的优缺点: 1)尽管伙伴内存算法在内存碎片问题上已经做的相当出色,但是 ...

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

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