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. django(7)modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  2. WPF MVVM 如何在ViewModel中操作View中的控件事件

    (在学习Wpf的时候,做一个小例子,想在TextBox改变后,检验合法性,并弹出提示.在找了很多贴后,发现这个小例子,抄袭过来,仅供参考. 最后也找到了适合自己例子的办法:在出发TextChanged ...

  3. 了解WaitForSingleObject中WAIT_ABANDONED 返回值

    1.互斥量内核对象 互斥量内核对象用来确保一个线程独占对一个资源的访问.互斥量对象包含一个使用计数.线程ID以及递归计数.互斥量与关键段的行为完全相同.但是互斥量是内核对象,而关键段是用户模式下的同步 ...

  4. Unity 多个Android sdk 插件如何组织目录

    一般Android 插件放在 Assets/Plugins/Android/ 下, 但是一个项目可能要用到多个sdk , 比如既要用 阿里九游的sdk 又要用 share sdk 怎么办呢, 难道要只 ...

  5. jdk时区相差8小时

    设置JVM的默认时区为东八区(北京时间)在下面四个目录(jre6\lib\zi\Etc.jre6\lib\zi.jdk1.6.0_18\jre\lib\zi\Etc.jdk1.6.0_18\jre\l ...

  6. Selenium 2.0 以后不在必须Selenium server了

    does not require the Selenium Server to automate the browser.这个句话,解决了我很的疑惑,新版Selenium 可以直接操作浏览器了,还可以 ...

  7. Android学习——Fragment与Activity通信(二)

    接下来就要到Fragment向Activity传输数据了.主要的思路,就是在Fragment中创建一个回调接口,利用该回调接口实现Fragment向Activity传输数据的功能. 回调函数(接口) ...

  8. 【NLP_Stanford课堂】句子切分

    依照什么切分句子——标点符号 无歧义的:!?等 存在歧义的:. 英文中的.不止表示句号,也可能出现在句子中间,比如缩写Dr. 或者数字里的小数点4.3 解决方法:建立一个二元分类器: 检查“.” 判断 ...

  9. web开发路径问题解决

     使用监听器解决路径问题 监听器:

  10. vmware克隆的linux机器网络不通

    当我使用vmware的完全克隆功能克隆出两台虚拟机之后,登录发现网络不通,仔细检查发现几个问题,由于克隆之后默认的eth0网卡在系统中会变成eth1,导致之前的eth0网卡配置信息无法加载,网络不通, ...