vue点击返回顶部插件vue-totop
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的更多相关文章
- jQuery-点击返回顶部
在页面上,有时需要点击某个图标钮实现返回顶部的效果. 实现方式如下,给图标按钮增加名叫goTop-hook的类. // 点击返回顶部 $(window).scroll(function() { if ...
- js中点击返回顶部
window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- javascript返回顶部插件+源码
javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...
- Jquery返回顶部插件
自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...
- 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue工程化:返回顶部和底部的动画效果
. <template> <div> <div class="scroll" :class="{show:isActive}"&g ...
- Vue图片懒加载插件 - vue lazyload的简单使用
Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...
- jqury点击返回顶部代码
效果请看右下角:代码如下: <div class="totop"><img src="https://www.cnblogs.com/images/cn ...
随机推荐
- HDUOJ-----2852 KiKi's K-Number(树状数组+二分)
KiKi's K-Number Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- Linux时间子系统(十七) ARM generic timer驱动代码分析
一.前言 关注ARM平台上timer driver(clocksource chip driver和clockevent chip driver)的驱动工程师应该会注意到timer硬件的演化过程.在单 ...
- Python exp() 函数
描述 exp() 方法返回x的指数,ex. 语法 以下是 exp() 方法的语法: import math math.exp( x ) 注意:exp()是不能直接访问的,需要导入 math 模块,通过 ...
- Win2008 r2 IIS7.5出现FastCGI进程最近常常失败。请过一会再尝试此请求的解决方法
错误信息如图所示: 应用程序“PIAOYUN.CC”中的服务器错误Internet Information Services 7.5 错误摘要HTTP 错误 500.0 - Internal Serv ...
- ASP.NET MVC 操作AD 获取域服务器当前用户姓名和OU信息
#region 根据当前登录域账号 获取AD用户姓名和所在OU目录 /// <summary> /// 根据当前登录域账号 获取AD用户姓名和所在OU目录 /// </summary ...
- 20.5 语音合成(百度2016年2月29日发布的tts引擎)
分类:C#.Android.VS2015: 创建日期:2016-03-17 一.简介 编写手机App时,有时需要使用文字转语音(Text to Speech)的功能,比如开车时阅读收到的短信.导航语音 ...
- 【Android】6.1 Toast(信息提示框)
分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 Toast用于向用户显示一些帮助或者提示信息.前面我们已经多次用到它,这里只是系统地将其总结一下,并演示它的各种基 ...
- linux-CentOS6.4安装Memcached+memcached扩展+安装memcache扩展+Memcache+mecached同步SESSION的几种方法
一.编译环境的准备 yum install gcc yum install gcc-c++ libstdc++-devel yum install zlib-devel 二.源代码包准备 wget ...