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 ...
随机推荐
- jq 获取各个元素的宽度高度的方法
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- 【转】解决ajax跨域问题的5种解决方案
转自: https://blog.csdn.net/itcats_cn/article/details/82318092 什么是跨域问题?跨域问题来源于JavaScript的"同源策略& ...
- 电脑新安装JDK版本并运行使用该JDK版本问题
情景:电脑上已正常安装一个jdk版本,如:1.7.0_71,因考虑到一些情况,现需要使用版本为1.7.0_80(1.8),故需新安装JDK,并使服务可以运行使用新安装的JDK版本. 网络找寻方法: ( ...
- [django]上下文管理器
上下文管理器django提取context中的数据去供模板调用 需求: 所有的页面都需要一个特定的变量 本质: python函数 , 接收一个HttpRequest对象的参数 , 且返回的必须是一个字 ...
- Day02 结构类型
1.结构类型是值类型 (类是引用类型) 2.结构中也可以像类一样,定义 字段 属性 方法 但是不能给字段赋初始值 3.结构的构造方法中,必须为所有的字段赋值 4.不能为结构显示定义无参数的构造 ...
- ijkplayer阅读学习笔记之从代码上看播放流程
http://blog.csdn.net/i_do_can/article/details/51374732
- The MEAN stack is a modern replacement for the LAMP (Linux, Apache, MySQL, PHP/Python) stack
w https://www.mongodb.com/blog/post/building-your-first-application-mongodb-creating-rest-api-using- ...
- Centos 7下安装nginx,使用yum install nginx,提示没有可用的软件包
Centos 7下安装nginx,使用yum install nginx,提示没有可用的软件包. 18 (flaskApi) [root@67 flaskDemo]# yum -y install n ...
- Jmeter源码框架
首先jmeter框架入口类: NewDriver类(src/core/org/apache/jmeter/NewDriver.java) public static void main(String[ ...
- 配置OSPF认证
按照上图拓扑配置路由器的IP 配置完后测试直连网段连通性 搭建OSPF网络 注意是多区域的配置,R2是ABR 连着area0和area1 并且每个路由器的环回接口IP也要加进去 此时密码以明文方 ...