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,表示元 ...
随机推荐
- c#批量更新list对象sql
注意: 1.语句中"set "后有空格, 2.最后一个if一定有值,且接连的sql字段 无 逗号 3.parameterList.Clear(); /// <summary ...
- IMPDP NETWORK_LINK参数
在<[IMPDP]同一数据库实例不同用户间数据迁移复制—— NETWORK_LINK参数>(http://space.itpub.net/519536/viewspace-631571)文 ...
- openstack(Pike 版)集群部署(三)--- Glance 部署
一.介绍 参照官网部署:https://docs.openstack.org/glance/queens/install/ 继续上一博客进行部署:http://www.cnblogs.com/weij ...
- Django的几种缓存的配置
1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会 ...
- 食物链(带权&种类并查集)
食物链 http://poj.org/problem?id=1182 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9326 ...
- stm32 开发中startup.s文件中常见的命令功能
由于C的普及以及编译器的发展,越来越多的软件工程师在编程时很少有机会接触到汇编语言.在ARM的开发中,我们不可避免的会遇到启动文件的编写,在KEIL环境中一般采用了startup.s的文件作为启动代码 ...
- [剑指Offer]11-旋转数组的最小数字(二分查找)
题目链接 https://www.nowcoder.com/practice/9f3231a991af4f55b95579b44b7a01ba?tpId=13&tqId=11159&t ...
- Delphi: Class Static Methods
在Delphi中,自Delphi 2007之后,支持static形式的class方法,样式比如: type TMyClass = class strict private class var FX: ...
- JAVA8 ARRAY、LIST操作 汇【5】)- JAVA8 LAMBDA LIST统计(求和、最大、最小、平均)
public class Apple { private Integer id; private String name; private BigDecimal money; private Inte ...
- zookeeper 单机版配置
zookeeper :中间件,为分布式系统进行协调服务 作用于分布式系统,可以为大数据服务 支持java 和 C 客户端的api zookeeper 特性:一致性,数据会按照顺序分批入库: 原子性:数 ...