vue回到顶部组件
html
<template>
<a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
<i class="iconfont"></i>
</a>
</template>
js
- 监听滚动事件
利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件:
mounted() {
window.addEventListener("scroll", this.scrollToTop);
},
- 监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 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
}
}
}
- 点击回到顶部按钮,让距离逐渐减少,形成上划的效果
//回到顶部
backTop() {
let back = setInterval(() => {
if (document.body.scrollTop || document.documentElement.scrollTop) {
document.body.scrollTop -= 100;
document.documentElement.scrollTop -= 100;
} else {
clearInterval(back);
}
});
},
- 离开该页面需要移除这个监听的事件
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回到顶部组件的更多相关文章
- Vue+elementUI 创建“回到顶部”组件
1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- 移动端Vue回到顶部
html: <div class="totop" id="totop" @click="Top" v-show="totop ...
- vue回到顶部的事件
其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;
- vue回顶部 组件 可以直接使用
<template> <div id="goTop"> <div class="goTop" v-show="goTop ...
- vue回到顶部
backTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; this.duration - ...
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
- vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
随机推荐
- Pandas基本功能之选取索引和过滤
索引.选取和过滤 大部分的查询用法 类型 说明 obj[val] 选取DataFrame的单个列或一组列 obj.ix[val] 选取DataFrame的单个行或一组行 obj.ix[:,val] 选 ...
- SSM的例子-参考
ssm的例子:http://blog.csdn.net/double030/article/details/63683613
- STL::map/multimap
map: 默认根据 key 排序(从小到大),能够通过 backet operator(operator [ ]) 来获取元素,内部由二叉搜索树来实现(binary search trees). mu ...
- 最小生成树 prime算法 UVALive - 6437
题目链接:https://vjudge.net/contest/241341#problem/D 这里有多个发电站,需要求出所有点都和发电站直接或间接相连的最小代价,那么就是求出最小生成树的问题了,有 ...
- H5入门
1.基本骨架 <!DOCTYPE html> <html> <head><title>标题</title><meta charset= ...
- UNITY3D 2D物流流体插件下载|Liquid Physics 2D
制作类似<鳄鱼小顽皮爱洗澡>游戏的必备插件 下载地址: https://item.taobao.com/item.htm?spm=0.7095261.0.0.47411debZFbEUn& ...
- 浅谈Java代理二:Cglib动态代理-MethodInterceptor
浅谈Java代理二:Cglib动态代理-MethodInterceptor CGLib动态代理特点: 使用CGLib实现动态代理,完全不受代理类必须实现接口的限制,而且CGLib底层采用ASM字节码生 ...
- Tomcat配置远程调试端口(windows、Linux)
当我们需要定位生产环境问题,而日志又不清晰的情况下,我们可以借助Tomcat提供的远程调试,设置如下: // Linxu系统: apach/bin/startup.sh开始处中增加如下内容: decl ...
- MVC和Web API的区别
最近几次面试时碰到过面试官提问这个问题.我一开始觉得这两个根本没有可比性,其中有一位面试官说,有不同啊,比如继承的基类不同,webapi继承的事APIController,等等. 今天我就总结一下,其 ...
- vue2.0 动画
//先来一个简单的入场 <template> <div id="box"> <input type="button" value= ...