backTop() {
var top = document.body.scrollTop || document.documentElement.scrollTop;
this.duration -= 3;
this.duration = this.duration <= 0 ? 1 : this.duration;
var speed = top / this.duration;
document.documentElement.scrollTop -= speed;
if (top > 0) {
this.timer = setTimeout(() => {
this.backTop();
}, 16);
} else {
this.duration = 50;
clearTimeout(this.timer); }
}

vue回到顶部的更多相关文章

  1. vue 回到顶部的小问题

    今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...

  2. vue回到顶部组件

    html <template> <a href="javascript:;" class="toTop" @click="backT ...

  3. 移动端Vue回到顶部

    html: <div class="totop" id="totop" @click="Top" v-show="totop ...

  4. vue回到顶部的事件

    其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;

  5. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

  6. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  7. Vue.之.回到顶部

    Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...

  8. Vue+elementUI 创建“回到顶部”组件

    1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...

  9. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

随机推荐

  1. HTML中的表单<form>标签

    一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...

  2. 使用java语言实现一个队列(两种实现比较)(数据结构)

    一.什么是队列,换句话说,队列主要特征是什么? 四个字:先进先出 六个字:屁股进,脑袋出 脑补个场景:日常排队买饭,新来的排在后面,前面打完饭的走人,这就是队列: OK,思考一个问题,我为什么写了两种 ...

  3. Spring 使用RedisTemplate操作Redis

    首先添加依赖: <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> < ...

  4. duration of lease 1 0.5 0.875 DHCP 租借时间 续租时间 重新绑定时间

    w

  5. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_10_练习_计算一个字符串中每个字符出现的次数

  6. C++ 命名管道示例

    想做一个 Hook CreateFile 重定向到内存的功能,貌似可以假借命名管道实现这个功能.不熟悉命名管道,做了几个demo,如下: Server: // NamedPipeServer.cpp ...

  7. pycharm运行时出现‘no module named 'requests'’

    参考文章:https://www.jianshu.com/p/f7c808365a9e 出现无requests的包的错误--->找包中是否有requests 1.从files下拉框中点击sett ...

  8. 重拾SQL——从无到有

    2016.10.22 因为工作需要,在这里提前重拾sql. 0.创建并选择数据库 mysql> SHOW DATABASES; +--------------------+ | Database ...

  9. DFS序1

    给一棵有根树,这棵树由编号为1..N的N个结点组成.根结点的编号为R.每个结点都有一个权值,结点i的权值为vi .接下来有M组操作,操作分为两类:1 a x,表示将结点a的权值增加x:2 a,表示求结 ...

  10. gdi+ 中发生一般性错误

    1.检查文件夹权限 2.保存的文件已存在并因某种原因被锁定. 3.文件夹路径不存在