html:

<div class="totop" id="totop" @click="Top" v-show="totop">
<i class="iconfont icon-zhiding"></i>
</div>

css:

.totop{
position: fixed;
width: 2.5rem ;/* 40/16 */
height: 2.5rem;
border-radius: 1.25rem /* 20/16 */;
opacity: 0.8;
background: rgba(255,255,255,.9);
box-shadow: 0 1px 5px 0 #e0e0e0;
right: 1.125rem; /* 18/16 */
bottom: 6rem; /* 64/16 */
z-index: 1100;
-webkit-transition: opacity .5s;
transition: opacity .5s;
i{
font-size: 1.5rem;
color: #e2294c;
margin: 0 0 0 0.5rem;
position: relative;
top: 0.5rem;
}
}

vue.js

mounted(){
window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop);
},
Top(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop = document.body.scrollTop =0;
// scroll('0px', 300);
},

移动端Vue回到顶部的更多相关文章

  1. vue 回到顶部的小问题

    今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...

  2. vue回到顶部组件

    html <template> <a href="javascript:;" class="toTop" @click="backT ...

  3. requestAnimationFrame移动端实现回到顶部效果

    $('#backToTop').click(function(){ var dist = $(document).height() - $(window).height(); timer = requ ...

  4. vue回到顶部的事件

    其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;

  5. vue回到顶部

    backTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; this.duration - ...

  6. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

  7. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  8. Vue.之.回到顶部

    Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...

  9. Vue+elementUI 创建“回到顶部”组件

    1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...

随机推荐

  1. Windows加密技术概述

    Windows加密是安全体系的重要基础和组成部分.现代CPU的保护模式是系统安全的硬件基石,基于CPU硬件的特权分级,Windows让自身的关键系统代码运行在高处理器特权级的内核模式,各种应用程序则运 ...

  2. bzoj 5305: [Haoi2018]苹果树

    Description Solution \(n\) 个点的二叉树的方案数是 \(n!\) 证明十分显然:新加入的点占掉了 \(1\) 个位置,新加了 \(2\) 个位置,那么多出来一个位置,所以第 ...

  3. 跨页面传值2之cookie多值使用

    单值cookie结构 CookieKeyName——CookieValue CookieKeyName2——CookieValue2 ............... 通过CookieKeyName进行 ...

  4. Android-事件处理机制(待补充)

    http://www.cnblogs.com/plokmju/archive/2013/03/13/2955175.html Android有两条事件处理机制 基于监听的事件处理 基于回调的事件处理 ...

  5. sass的安装

    sass的安装 1.当ruby安装完成后,在自己电脑开始菜单下面找到ruby的控制台"cmd"; 2.然后直接在命令行中输入 gem install sass 3.在安装过程中 可 ...

  6. 14_synchronized深入

    [脏读] 对于对象同步和异步的方法,我们在设计程序的时候,一定要考虑问题的整体,不然会出现不一致的错误,最经典的错误的就是脏读(dirty read). [实例代码] package com.higg ...

  7. 关于httpclient的终结

    End of life 关于Commons HttpClient项目现在已经结束,不再开发.它已经被HttpClient和HttpCore模块中的ApacheHttpComponents项目所取代,新 ...

  8. Flask入门 flask结构 url_for 重定向(一)

    Flask入门(一) 1 安装虚拟环境Mac,linux sudo pip install virtualenv ​ ubuntu系统 sudo apt-get install python-virt ...

  9. Oracle彻底杀掉进程

    kill session 是DBA经常碰到的事情之一.如果kill 掉了不该kill 的session,则具有破坏性,因此尽可能的避免这样的错误发生.同时也应当注意,如果kill 的session属于 ...

  10. 转贴:天然VC的迷局

    天然VC的迷局作者:棱子 http://www.jkzgr.net/jiankangguanli/176.html 维生素C对人类来说是一种必不可少的维生素.我们可以通过正常饮食获取所需的VC.市场上 ...