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. Pandas基本功能之选取索引和过滤

    索引.选取和过滤 大部分的查询用法 类型 说明 obj[val] 选取DataFrame的单个列或一组列 obj.ix[val] 选取DataFrame的单个行或一组行 obj.ix[:,val] 选 ...

  2. SSM的例子-参考

    ssm的例子:http://blog.csdn.net/double030/article/details/63683613

  3. STL::map/multimap

    map: 默认根据 key 排序(从小到大),能够通过 backet operator(operator [ ]) 来获取元素,内部由二叉搜索树来实现(binary search trees). mu ...

  4. 最小生成树 prime算法 UVALive - 6437

    题目链接:https://vjudge.net/contest/241341#problem/D 这里有多个发电站,需要求出所有点都和发电站直接或间接相连的最小代价,那么就是求出最小生成树的问题了,有 ...

  5. H5入门

    1.基本骨架 <!DOCTYPE html> <html> <head><title>标题</title><meta charset= ...

  6. UNITY3D 2D物流流体插件下载|Liquid Physics 2D

    制作类似<鳄鱼小顽皮爱洗澡>游戏的必备插件 下载地址: https://item.taobao.com/item.htm?spm=0.7095261.0.0.47411debZFbEUn& ...

  7. 浅谈Java代理二:Cglib动态代理-MethodInterceptor

    浅谈Java代理二:Cglib动态代理-MethodInterceptor CGLib动态代理特点: 使用CGLib实现动态代理,完全不受代理类必须实现接口的限制,而且CGLib底层采用ASM字节码生 ...

  8. Tomcat配置远程调试端口(windows、Linux)

    当我们需要定位生产环境问题,而日志又不清晰的情况下,我们可以借助Tomcat提供的远程调试,设置如下: // Linxu系统: apach/bin/startup.sh开始处中增加如下内容: decl ...

  9. MVC和Web API的区别

    最近几次面试时碰到过面试官提问这个问题.我一开始觉得这两个根本没有可比性,其中有一位面试官说,有不同啊,比如继承的基类不同,webapi继承的事APIController,等等. 今天我就总结一下,其 ...

  10. vue2.0 动画

    //先来一个简单的入场 <template> <div id="box"> <input type="button" value= ...