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 ...
随机推荐
- A. Dreamoon and Stairs(Codeforces Round #272)
A. Dreamoon and Stairs time limit per test 1 second memory limit per test 256 megabytes input standa ...
- ASP.NET#JavaScript中调用WebServer注意的问题
1)要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,就要取消注销以下行:[System.Web.Script.Services.ScriptService](2)调用格式:命名空间 ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- Form_Form Builder的常用方法(概念)
2014-07-07 Created By BaoXinjian
- Python 字典 values() 方法
描述 Python 字典 values() 方法以列表形式(并非直接的列表,若要返回列表值还需调用list函数)返回字典中的所有值. 语法 values() 方法语法: D.values() 参数 无 ...
- Python sin() 函数
描述 sin() 返回的x弧度的正弦值. 语法 以下是 sin() 方法的语法: import math math.sin(x) 注意:sin()是不能直接访问的,需要导入 math 模块,然后通过 ...
- POJ 1789:Truck History(prim&&最小生成树)
id=1789">Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17610 ...
- js数组设置值操作
js中给数组中添加新值的方式: var flow=[]; for(var i=0;i<21;i++){ flow.push(Math.floor(Math.random()*(30+((i%12 ...
- dia无法输入中文?
解决方法: 以管理员权限打开/usr/bin/dia ,做如下修改 #dia-gnome --integrated "$@" dia-gnome "$@"
- Mysql 操作命令 详解
目的:1. 掌握mysql的安装,建库.建表.表的三种基本操作.查询.多表查询.数据库的备份与恢复2. MYSQL 服务器的简单维护3. mysql+apache+php的环境搭建 一.如何安装mys ...