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. 基于 CentOS 搭建 WordPress 个人博客

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 腾讯云提供了开发者实验室帮助用户搭建 WordPress 个人博客,教程内容如下,用户可以点击开发者实验室快速上机完成实验. 准备 LNMP ...

  2. [Modelsim] 仿真的基本操作

    切换路径,建立库并编译所有源文件之后, 键入命令: vopt +acc topmodulename -o top vsim top 其中topmodulename是顶层模块的名称.

  3. js 中标签的增删 方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. ubuntu命令行添加拥有管理员权限新用户

    最近买了个服务器,只有一个root用户,天天登录挺不方便的,所以想要新建用户;之前在本地都是用界面话新建的用户,这次记录一下学习命令行新建用户的过程: 第一步 : # sudo adduser zhq ...

  5. 创建Django项目时,settings的静态文件的配置

    STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )

  6. 【Linux相识相知】任务计划和周期性任务

    在我们的生活中,有的工作是例行的,例如每年一次加薪.每年给女朋友过一次生日.每天上班都要打卡等,有的工作是临时发生的,例如明天朋友要来访,你需要准备午餐等等. 像很多例行的工作,你一旦忙起来就很容易忘 ...

  7. 从零开始写C# MVC框架之--- 项目结构

    框架总分2个项目:Web开发项目.帮助类项目 (ZyCommon.Zy.Utilities) 1.ZyCommon,是Web开发项目结构.新建一个空解决方案,再建Data.Service.ZyWeb解 ...

  8. 使用Access作数据库

    import java.sql.*; public class ConnectAccess { public static void main(String args[]){ ConnectAcces ...

  9. python之高阶函数map/reduce

    L = [] for n in [1, 2, 3, 4, 5, 6, 7, 8, 9]: L.append(f(n)) print(L) Python内建了map()和reduce()函数. 我们先看 ...

  10. SQL Server迭代求和

    drop table t_geovindu create table t_geovindu ( xid int IDENTITY (1, 1), price money, DebitCredit VA ...