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 ...
随机推荐
- 陨石坑之webapi 使用filter中如何结束请求流
先看下正常的结束asp.net 请求流怎么写的 System.Web.HttpContext.Current.Response.Write(“end”); System.Web.HttpContext ...
- Ubuntu 16.04下使用docker部署Redis主从复制
(以下docker相关的命令,需要在root用户环境下或通过sudo提升权限来进行操作.) 1.拉取Redis镜像到本地 docker pull redis 2. 准备Redis主从配置文件 Redi ...
- 从MapGIS K9到MapGIS 10到MapGIS 10.3 Server
- Alexa TOP 100万的域名列表
Alexa是一家专门发布网站世界排名的网站,是亚马逊公司的一家子公司.Alexa每天在网上搜集多达几十亿的网址链接,而且为其中的每一个网站进行了排名. Alexa通过Alexa官网查询好像TOP 50 ...
- jq和js用法:入口写法
jq和js入口写法demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- spark 学习网站和资料
spark 官网首页 https://spark.apache.org/ spark 官网文档 spark scala API 文档 https://spark.apache.org/docs/lat ...
- 二十五、python中pickle序列学习(仅python语言中有)
1.pickle序列介绍:提供4个关键字:dumps,dump,loads,load 语法:f.write(pickle.dumps(dict))=pickle.dump(dict,f) " ...
- something about motorcycle and automobile
cycle: 循环, 周期, 自行车. 摩托车: motorcycle, motor cycle 轮胎 continent(al): 大陆的, (七)大洲的; 德国的大陆轮胎, 马牌轮胎; 如吉普的c ...
- mac, ios 模拟器
genymotion 最好的android 硬件模拟器. 可多开,可gps定位,可模拟重力系统,可模拟磁场系统,模拟器海拔高度. 甚至可以模拟sd卡. 直接就等于真机. virtualbox 最好的 ...
- ora-01033,ORA-16038
ORA-01033: ORACLE initialization or shutdown in progress 1.进入CMD,执行set ORACLE_SID=fbms,确保连接到正确的SID:2 ...