移动端Vue回到顶部
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回到顶部的更多相关文章
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- vue回到顶部组件
html <template> <a href="javascript:;" class="toTop" @click="backT ...
- requestAnimationFrame移动端实现回到顶部效果
$('#backToTop').click(function(){ var dist = $(document).height() - $(window).height(); timer = requ ...
- vue回到顶部的事件
其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;
- vue回到顶部
backTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; this.duration - ...
- 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 ...
随机推荐
- Windows加密技术概述
Windows加密是安全体系的重要基础和组成部分.现代CPU的保护模式是系统安全的硬件基石,基于CPU硬件的特权分级,Windows让自身的关键系统代码运行在高处理器特权级的内核模式,各种应用程序则运 ...
- bzoj 5305: [Haoi2018]苹果树
Description Solution \(n\) 个点的二叉树的方案数是 \(n!\) 证明十分显然:新加入的点占掉了 \(1\) 个位置,新加了 \(2\) 个位置,那么多出来一个位置,所以第 ...
- 跨页面传值2之cookie多值使用
单值cookie结构 CookieKeyName——CookieValue CookieKeyName2——CookieValue2 ............... 通过CookieKeyName进行 ...
- Android-事件处理机制(待补充)
http://www.cnblogs.com/plokmju/archive/2013/03/13/2955175.html Android有两条事件处理机制 基于监听的事件处理 基于回调的事件处理 ...
- sass的安装
sass的安装 1.当ruby安装完成后,在自己电脑开始菜单下面找到ruby的控制台"cmd"; 2.然后直接在命令行中输入 gem install sass 3.在安装过程中 可 ...
- 14_synchronized深入
[脏读] 对于对象同步和异步的方法,我们在设计程序的时候,一定要考虑问题的整体,不然会出现不一致的错误,最经典的错误的就是脏读(dirty read). [实例代码] package com.higg ...
- 关于httpclient的终结
End of life 关于Commons HttpClient项目现在已经结束,不再开发.它已经被HttpClient和HttpCore模块中的ApacheHttpComponents项目所取代,新 ...
- Flask入门 flask结构 url_for 重定向(一)
Flask入门(一) 1 安装虚拟环境Mac,linux sudo pip install virtualenv ubuntu系统 sudo apt-get install python-virt ...
- Oracle彻底杀掉进程
kill session 是DBA经常碰到的事情之一.如果kill 掉了不该kill 的session,则具有破坏性,因此尽可能的避免这样的错误发生.同时也应当注意,如果kill 的session属于 ...
- 转贴:天然VC的迷局
天然VC的迷局作者:棱子 http://www.jkzgr.net/jiankangguanli/176.html 维生素C对人类来说是一种必不可少的维生素.我们可以通过正常饮食获取所需的VC.市场上 ...