vue回到顶部
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回到顶部的更多相关文章
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- vue回到顶部组件
html <template> <a href="javascript:;" class="toTop" @click="backT ...
- 移动端Vue回到顶部
html: <div class="totop" id="totop" @click="Top" v-show="totop ...
- vue回到顶部的事件
其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;
- vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- Vue.之.回到顶部
Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...
- Vue+elementUI 创建“回到顶部”组件
1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
随机推荐
- 自动配置/切换/查看JDK环境变量
最近老是需要几个版本的JDK切换工作,于是网上收集资料整理,自己写了一个:自动配置/切换/查看JDK环境变量的批处理脚本.顺带3个JDK版本分别是:jdk1.6.0_43,jdk1.7.0_80,jd ...
- mysql INSERT语句 语法
mysql INSERT语句 语法 作用:用于向表格中插入新的行. 语法:INSERT INTO 表名称 VALUES (值1, 值2,....)或者INSERT INTO table_name (列 ...
- 冲刺周五——Fifth Day
#一.Fifth Day照片 #二.今日份燃尽图 #三.项目进展 * 码云团队协同环境构建完毕 * 利用Leangoo制作任务分工及生成燃尽图 * 完成AES加解密部分代码 * 用代码实现对文件的新建 ...
- DAY 3 上午
状压DP 状态压缩dp 状态压缩是设计dp状态的一种方式. 当普通的dp状态维数很多(或者说维数与输入数据有关),但每一维总量很少时,可以将多维状态压缩为一维来记录. 这种题目最明显的特征就是:都存在 ...
- First-order logic
w https://en.wikipedia.org/wiki/First-order_logic
- xpath 算法
w https://www.w3.org/TR/xpath20/ Before an expression can be processed, its input data must be repre ...
- Helvetic Coding Contest 2019 online mirror (teams allowed, unrated)
http://codeforces.com/contest/1184 A1 找一对整数,使x^x+2xy+x+1=r 变换成一个分式,保证整除 #include<iostream> #in ...
- ASP.NET Core 上传微信永久视频素材
话不多说直接上源码 请求实体 public class AddVideoRequest { /// <summary> /// 文件流 / ...
- VMware 虚拟化编程(11) — VMware 虚拟机的全量备份与增量备份方案
目录 目录 前文列表 全量备份数据的获取方式 增量备份数据的获取过程 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDiskLib/VADP 概念简析 VMware 虚拟化编 ...
- Delphi XE2 之 FireMonkey 入门(16) - 滤镜: 实例测试
窗体上需要 TImage.TOpenDialog 和六个按钮. unit Unit1; interface uses System.SysUtils, System.Types, System.U ...