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. 打开Activity时,不自动显示(弹出)虚拟键盘

    打开Activity时,不自动显示(弹出)虚拟键盘 在AndroidManifest.xml文件中<activity>标签中添加属性 android:windowSoftInputMode ...

  2. 安装 nvm 遇到的坑

    本篇文章由:http://xinpure.com/encountered-nvm-installation-pits/ 说两句 以前开发都是用最新的 Node 版本,不过难免会有旧项目需要使用低版本做 ...

  3. java项目中classpath路径到底指的是哪里?

    本文转自:http://blog.csdn.net/javaloveiphone/article/details/51994268 1.src不是classpath, WEB-INF/classes和 ...

  4. sigmoid 函数与 softmax 函数

    sigmoid 函数与 softmax 函数     1. sigmoid 函数       sigmoid 函数又称:logistic函数,逻辑斯谛函数.其几何形状即为一条sigmoid曲线. lo ...

  5. 【LeetCode】135. Candy

    Candy There are N children standing in a line. Each child is assigned a rating value. You are giving ...

  6. ios 利用UIScrollView实现图片缩放

    前言:我们希望做出的效果是,实现图片的分页滑动,且每张图片都可以双击或用手指捏合来缩放大小.上一篇讲解UIGestureRecognizer的中,我们介绍的UIPinchGestureRecogniz ...

  7. Oracle角色、权限的一些常用视图

    ORACLE中数据字典视图分为3大类, 用前缀区别,分别为:USER,ALL 和 DBA,许多数据字典视图包含相似的信息. 1)USER_*:有关用户所拥有的对象信息,即用户自己创建的对象信息: 2) ...

  8. TransactionScope事务处理方法介绍及.NET Core中的注意事项 SQL Server数据库漏洞评估了解一下 预热ASP.NET MVC 的VIEW [AUTOMAPPER]反射自动注册AUTOMAPPER PROFILE

    TransactionScope事务处理方法介绍及.NET Core中的注意事项   作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/10170712.ht ...

  9. Python练习笔记——采用生成器函数实现两数之间的素数计算

    题目:编写一个生成器函数myprimes(start, end),实现[start, end)范围内的所有素数计算2 3 5 7. ... 第一 常规函数方法 方法1 def myprime(num) ...

  10. pcurl 学习 http文件下载及写入空设备文件实例

    import pycurl import sys import os import random import string import time class Transaction(object) ...