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. 原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  2. PHP中curl的使用

    cURL 函数 curl_close — 关闭一个cURL会话 curl_copy_handle — 复制一个cURL句柄和它的所有选项 curl_errno — 返回最后一次的错误号 curl_er ...

  3. BasicAuth和OAuth

    参考资料 百度百科BasicAuth 维基百科OAuth BasicAuth基本授权 BasicAuth又叫HttpAuth,它非常简单.例如你访问一个页面时,会弹出用户名密码框 它的优点是:简单,只 ...

  4. 快速掌握activity的生命周期

    activity的生命周期不管是在面试还是在工作中我们都会经常遇到,这当然也是非常基础的,基础也很重要哦,学会activity的生命周期对我们以后开发更健壮的程序会有很大帮助.下面来看一下Activi ...

  5. Android学习系列(2)--App自动更新之通知栏下载

    这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用.1.设计思路,使用VersionCode定义为版本升级参数. android为我们定义版本提供了2个属性:& ...

  6. [Creating an image format with an unknown type is an error] on cordova, ios 10

    在 iOS 10  调用 了 获取  相册的 可编辑 的  照片后,会出现 [Creating an image format with an unknown type is an error] 这个 ...

  7. 【C语言天天练(十三)】printf、fprintf、sprintf和snprintf函数

    #include <stdio.h> int printf(const char *format, ...); int fprintf(FILE *stream, const char * ...

  8. Python lower() 方法

    描述 Python lower() 方法转换字符串中所有大写字符为小写,其效果和 casefold() 方法非常相似. 两者的区别是:lower() 方法只对ASCII编码,也就是‘A-Z’有效,对于 ...

  9. navicat 快速复制表所有字段

    查询-新建查询-查询创建工具-选择表-全选字段-查询编辑器

  10. python标准库介绍——25 errno 模块详解

    ==errno 模块== ``errno`` 模块定义了许多的符号错误码, 比如 ``ENOENT`` ("没有该目录入口") 以及 ``EPERM`` ("权限被拒绝& ...