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. python 批量ping服务器

    最近在https://pypi.python.org/pypi/mping/0.1.2找到了一个python包,可以用它来批量ping服务器,它是中国的大神写的,支持单个服务器.将服务器IP写在txt ...

  2. 前台通过ajax获取后台数据,PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  3. IIS7部署网站出现500.19错误(权限不足)的解决方案

    错误摘要 HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息 模块 IIS Web Core 通知 未知 处理 ...

  4. C#委托的好处

    C#委托的好处 先来看一个例子: 某人有三子,让他们各自带一样东西出门,并带回一头猎物. 可以理解为一种父亲对儿子的委托: 猎物  办法(工具 某工具) 三个人执行委托的方法各不相同 兔子 打猎(工具 ...

  5. 通过response向服务器用Io流写入图片

       1.响应头设置字节.     使用response获得字节输出流        ServletOutputStream out = response.getOutputStream();     ...

  6. Java内部类详解 2

    Java内部类详解 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就 ...

  7. Spring课程 Spring入门篇 4-5 Spring bean装配之基于java的容器注解说明--@Bean

    1 解析 2.1 @bean注解定义 2.2 @bean注解的使用 2 代码演练 2.1 @bean的应用不带name 2.2 @bean的应用带name   2.3 @bean注解调用initMet ...

  8. Csharp: FreeTextbox 编辑器控件运行时错误: 'FTB_ResizeGalleryArea' 未定义

    ftb.imagegallery.aspx 改一下代码: <form id="Form1" runat="server" enctype="mu ...

  9. 绘图和数据可视化工具包——matplotlib

    一.Matplotlib介绍 Matplotlib是一个强大的Python**绘图**和**数据可视化**的工具包. # 安装方法 pip install matplotlib # 引用方法 impo ...

  10. POJO对象

    POJO(Plain Old Java Objects)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和 EJB混淆起来, 而且简 ...