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. echart--如何在折线图上添加矩形背景(可以借用bar柱状图的实现效果)

    当鼠标滑过,如何在折线图上添加矩形背景图呢? 具体如下: 上面的dataShadow的来源

  2. 判断img的src为空/点击时候两张图片来回替换

    if($('.icon-right img').src==null){ $('.span-gray').addClass('c8'); } <img> ///////////// < ...

  3. [转]SQLServer : EXEC和sp_executesql的区别

    MSSQL为我们提供了两种动态执行SQL语句的命令,分别是EXEC和sp_executesql.通常,sp_executesql则更具有优势,它提供了输入输出接口,而EXEC没有.还有一个最大的好处就 ...

  4. [USACO2019JAN]Sleepy Cow Sorting题解

    拿到这个问题,我们从头开始思考. 我们把序列看做两部分,一部分在前表示待排序的,记为序列1,一部分在后表示已排序的,记为序列2. 因为序列2在后,所以不必担心它影响序列1的排序,那么对于序列1的第一个 ...

  5. XXX is not a function

    今天,一个以前的小伙伴跟我说他遇到了一个问题,调试了将近两天(这家伙一开始不打算干程序员,跑去干了两个月销售,现在又想回来写代码了,所以就自己折腾一个demo,免得面试的时候被问住) 我把他的代码从头 ...

  6. 获取浏览区变化的方法resize() 方法

    当调整浏览器窗口的大小时,发生 resize 事件. resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数. <html> <head> ...

  7. Day2 01 引用类型和值类型

    值类型:值类型变量,存储的是对象的值.给其赋值,会创建值的副本,修改任何一个副本,不会影响其他副本. int x = 5; int y = x;  //创建一个x的副本y  x把其自身的值传送给了y ...

  8. 史上最详细的XGBoost实战

    史上最详细的XGBoost实战 0. 环境介绍 Python 版 本: 3.6.2 操作系统 : Windows 集成开发环境: PyCharm 1. 安装Python环境 安装Python 首先,我 ...

  9. ParaEngine 一个同事的公司的开源引擎

    看说明作者是李西峙,浙大研究生,靠投资研发此引擎,10年了,大概翻了下github里的文件,值得收藏,至少里面有voxelmesh https://github.com/LiXizhi/NPLRunt ...

  10. 高通 8x26 andorid light sensor(TSL258x) 开发【转】

    本文转载自:http://www.voidcn.com/blog/u012296694/article/p-1669831.html 前言 8926平台的sensor架构与之前的平台完全不同,实际上已 ...