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 ...
随机推荐
- CSS盒子模型(框模型)
一.如何理解盒子模型 盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...
- Linux内核设计与实现 总结笔记(第九章)内核同步介绍
在使用共享内存的应用程序中,程序员必须特别留意保护共享资源,防止共享资源并发访问. 一.临界区和竞争条件 1.1 临界区和竞争条件 所谓临界区就是访问和操作共享数据代码段.多个执行线程并发访问同一个资 ...
- 【bzoj2724】[Violet 6]蒲公英
*题目描述: *输入: 修正一下 l = (l_0 + x - 1) mod n + 1, r = (r_0 + x - 1) mod n + 1 *输出: *样例输入: 6 3 1 2 3 2 1 ...
- 170826-关于spring的知识点及练习
1.Spring作用: 1.生态体系庞大,全能型选手![springmvc是其一个子模块,jdbcTemplate能直接操作数据库!] 2.将其他组件粘合在一起 3.IOC容器和AOP[Aspect ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 2.单表查询
Chapter 2 Single-Table Queries GROUP BY之后的阶段的操作对象就是组(可以把一组想象成很多行组成的)了,HAVING负责过滤掉一些组.分组后的COUNT(*)表示每 ...
- Android传感器系统架构【转】
本文转载自:http://blog.csdn.net/qianjin0703/article/details/5942579 版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 体系结构 2. ...
- Glide 图片框架
学习参考:https://blog.csdn.net/guolin_blog/article/details/53759439 一 基础使用 Picasso比Glide更加简洁和轻量,Glide比Pi ...
- php对bom的处理
通常只有在windows的notepad中 , 创建文本文件, 保存为UTF-8 时, 它会自动添加3个字节: ef bb bf. 用editplus来看txt文件就可以看得很清楚. 但是, 只有wi ...
- leetcode 258. 各位相加 (python)
给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数. 示例: 输入: 38输出: 2 解释: 各位相加的过程为:3 + 8 = 11, 1 + 1 = 2. 由于 2 是一位数,所以 ...
- 后台管理模板ACE
要做系统,界面展示效果较简单,1个开发人员,无美工,无前端! 以前一直用bootstrap来做界面.这次也走的老路!同样适用的bootstrap界面.做完之后,功能上,我还是比较满意的,兼容IE8+, ...