html

<template>
<a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
<i class="iconfont"></i>
</a>
</template>

js

  1. 监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件:

 mounted() {
window.addEventListener("scroll", this.scrollToTop);
},
  1. 监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 toTop 为true,否则就是false;
scrollToTop() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let browserHeight = window.outerHeight;
if (scrollTop > browserHeight) {
this.backToTop = true
} else {
this.backToTop = false
}
}
}
  1. 点击回到顶部按钮,让距离逐渐减少,形成上划的效果
 //回到顶部
backTop() {
let back = setInterval(() => {
if (document.body.scrollTop || document.documentElement.scrollTop) {
document.body.scrollTop -= 100;
document.documentElement.scrollTop -= 100;
} else {
clearInterval(back);
}
});
},
  1. 离开该页面需要移除这个监听的事件
destroyed() {
window.removeEventListener("scroll", this.scrollToTop);
}

css

<style lang="scss">
.toTop {
position: fixed;
bottom: 150px;
right: 30px;
z-index:;
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid #999; /*no*/
text-align: center;
background-color: #fff;
i {
color: #999;
font-size: 58px;
vertical-align: middle;
font-weight:;
}
}
</style>

												

vue回到顶部组件的更多相关文章

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

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

  2. vue 回到顶部的小问题

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

  3. 移动端Vue回到顶部

    html: <div class="totop" id="totop" @click="Top" v-show="totop ...

  4. vue回到顶部的事件

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

  5. vue回顶部 组件 可以直接使用

    <template> <div id="goTop"> <div class="goTop" v-show="goTop ...

  6. vue回到顶部

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

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

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

  8. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

  9. vue中回到顶部

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

随机推荐

  1. day24 面向对象三大特性之封装

    本周内容 组合 封装 多态 面向对象高级 异常处理 网络协议 通讯原理 互联网协议 TCP/UDP 基于TCP协议的套接字 上周回顾 1.xml,os,os.path 2.ATM+购物车 三层结构 3 ...

  2. python3获得命令行输入的参数

    外部直接执行python文件时,我们有时需要获得命令行的参数   获得命令行参数的两种方式   1.通过sys.argv sys.argv:获得一个参数列表,第一个值为文件名本身,通过sys.argv ...

  3. 修改app工程名 Android Studio

    1.关掉AndroidStudio,在原项目最外层文件夹和内部xxx.iml上直接重新命名, 2.然后重新打开AndroidStudio,加载项目, 3.最后

  4. ceph 维护之 osd节点添加

    一.目标 添加一台新osd 节点,主机名ceph6 到 ceph 集群.public IP:10.6.32.25      cluster_network :10.6.33.25 二.基础环境配置 1 ...

  5. 筛素数 poj 2739

    题目链接:https://vjudge.net/problem/POJ-2739 输入一个数字n,判断有没有一段连续的素数之和大于n,如果有,计算总共有几种. 思路:用素数筛法求出10000以内的素数 ...

  6. 动态添加select选项空选项问题

    问题:动态添加校区选项的数据的时候,总是多添加一项空白的数据. 动态添加代码如下: 网上找到的原因:因为在option中有标签没有闭合,所以导致浏览器认为是两个option, 所以只需要给这个标签添加 ...

  7. how2j学习日志——J2EE(2018年3月28日)

    1. 开始跟着站长学习J2EE,首页是简单的Tomcat安装和部署,我从官网上下载的是7.0.85版本,修改server.xml中的默认端口号为80.80端口是web服务的默认端口,因此在浏览器上输入 ...

  8. coding利用Webhook实现Push代码后的jenkins自动构建

    安装jenkins 篇:http://www.cnblogs.com/loveyouyou616/p/8714544.html 之前部署了持续集成工具jenkins.通常是开发后的代码先推到 远程代码 ...

  9. sql backup

    create or replace procedure P_updateasbegin update security_price p set p.closing_price = (select MI ...

  10. Django——模板语言相关内容

    Django模板语言相关内容   Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...